vue3-transform-dom

一个基于Vue3的可以缩放和拖动dom元素的组件

安装

npm install vue3-transform-dom --save

API

props属性

|属性名|说明|类型|默认值| |:------|:------|:------|:------| |width|宽|number|-| |height|高|number|-| |disableMove|是否禁止移动|boolean|false| |disableScale|是否禁止缩放|boolean|false| |scaleStep|宽|number|0.1| |minWH|dom被缩小到的最小的宽高尺寸|number|1| |maxWH|dom被放大到的最大的宽高尺寸|number|Infinity| |limitInWindow|是否限制数据始终有区域位于窗口内部|boolean|false| |limitSize|显示在窗口内部的最小值|number|100|

插槽

• 默认插槽

{
  /**
   * @see {https://www.npmjs.com/package/transfer-to-window}
   */
  transfer2window: TransferTowindow;
}

方法与属性

• 获取鼠标相对于el的坐标

/**
 * 获取鼠标相对于el的坐标
 */
getPosition(e: MouseEvent): { x: number, y: number }

• 强制刷新

/**
 * 强制刷新
 */
forceFresh()

• 中心缩放

/**
 * 中心缩放
 * @param zoomOut 放大
 */
zoomByCenter(zoomOut: boolean)

• transfer2window 参考transfer-to-window

使用

<template>
  <transform-dom :width="1024" :height="1024">
    <div class="inner">
      inner dom
    </div>
  </transform-dom>
</template>