0.1.1 • Published 8 years ago
v-resize v0.1.1
v-resize
适用于 Vue 2.0 的使元素大小可缩放的指令。
安装
$ yarn add v-resize # npm i -S v-resize在线示例
https://xbt1.github.io/v-resize

使用
一个简单的例子
import VResize from 'v-resize'
export default {
directives: {
resize: VResize,
},
data () {
return {
options: {
onResize (params) {
console.log(params)
},
directions: ['right', 'bottom'],
},
}
}
}<template>
<div v-resize="options">
拖拽缩放
</div>
</template>详细示例见例子
选项
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: 缩放的方向
topbottomleftrightleft-topbottom-rightright-topbottom-left
- target: 绑定的元素
- event:
mousemove事件
开发
$ yarn install
$ yarn dev构建
$ yarn build:package # 构建 npm 包
$ yarn build:example # 构建示例站点
$ yarn build # build:package & build:example更新日志
详见 releases
