vue-drag-resizer

$3

> vue-drag-resizer，基于定位实现 DOM 旋转及大小调整、按住 shift 等比例缩放
> demo https://yokochen222.github.io/vue-drag-resizer/

$3

``bash
npm install vue-drag-resizer
`

$3

> demo https://yokochen222.github.io/vue-drag-resizer/

`html



`

$3

> 默认单位 px; left、top、width、height、rotate 必须使用.sync 修饰符更改新值 或者通过 change 事件更新

| prop | 类型 | 必填 | 描述 |
| ---------------------------- | ------- | ---- | ------------------------------------------------------ |
| left | number | 是 | 相对画布 left 值 |
| top | number | 是 | 相对画布 top 值 |
| width | number | 是 | 元素 width 值 |
| height | number | 是 | 元素 height 值 |
| rotate | number | 是 | 元素旋转角度 deg |
| focus | boolean | 否 | 是否获取焦点 |
| tabindex | number | 否 | tab 键序 |
| focusZIndex | number | 否 | 默认值同 tabindex+1 获取焦点后的层级顺序 |
| canvas | string | 否 | 默认值 document.body; (注 canvas 节点必须拥有宽高) |
| leftMousedownStopPropagation | boolean | 否 | 默认值 true, 鼠标左键点击元素是否阻止事件冒泡 |
| leftMousedownPreventDefault | boolean | 否 | 默认值 true, 鼠标左键点击元素是否阻浏览器默认行为 |
| mousemoveStopPropagation | boolean | 否 | 默认值 true, 鼠标点击元素并移动元素是否阻止事件冒泡 |
| mousemovePreventDefault | boolean | 否 | 默认值 true, 鼠标点击元素并移动元素是否默认浏览器行为 |

$3

| EventName | 事件值类型 | 示例 | 描述 |
| --------- | ---------- | --------------------------------------------------- | ------------------------------ |
| focus | null | | 元素 focus |
| blur | null | | 元素 blur |
| change | object | { top: 10,left: 10,height:10,width:10,rotate: 0 }` | 元素布局或大小发生改变事件回调 |

$3

> 按 tab 调整获取焦点的元素
> 按住 shift 键 实现 元素等比例缩放
> 单击 方向键 实现 单步移动 元素

$3

> 1、新增阻止事件冒泡及默认行为 props