v-resize
适用于 Vue 2.0 的使元素大小可缩放的指令。
安装
$ yarn add v-resize # npm i -S v-resize
在线示例
https://xbt1.github.io/v-resize
使用
一个简单的例子
directives: resize: VResize { return options: { console } directions: 'right' 'bottom' }
拖拽缩放
详细示例见例子
选项
v-resize="options"
,options: object
见下
参数 | 说明 | 类型 | 可选值/说明 | 默认值 |
---|---|---|---|---|
resizableClass | 可拖拽时的 class | String | -- | vrz-resizable |
draggedClass | 鼠标按下时的 class | String | -- | vrz-dragged |
resizingClass | 缩放时的 class | String | -- | vrz-resizing |
directions | 可拖拽缩放的方向 | Array | ['top', 'bottom', 'left', 'right'] | ['bottom', 'right'] |
zoneSize | 识别区域大小 | Number | -- | 4 |
onResize | 缩放时的回调 | Funtion | params: object | -- |
onResize
回调参数解释
- direction: 缩放的方向
top
bottom
left
right
left-top
bottom-right
right-top
bottom-left
- target: 绑定的元素
- event:
mousemove
事件
开发
$ yarn install$ yarn dev
构建
$ yarn build:package # 构建 npm 包 $ yarn build:example # 构建示例站点 $ yarn build # build:package & build:example
更新日志
详见 releases