1.0.3 • Published 4 months ago
vue3-transform-dom v1.0.3
vue3-transform-dom
一个基于Vue3的可以缩放和拖动dom元素的组件
安装
npm install vue3-transform-dom --saveAPI
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>