插件名称 | VueResizable |
---|---|
版本号 | v2.0.0 |
发布时间 | 2020年4月18日 |
插件作者 | nikitasnv |
一个小型且可配置的可调整大小的组件,允许用户使用拖放来调整元素的大小。
v2.0.0(03/06/2021)
v1.2.5(09/16/2020)
v1.2.3(08/09/2020)
v1.2.2(08/02/2020)
v1.2.1(07/31/2020)
# NPM
$ npm install vue-resizable --save
1.导入并注册VueResizable组件。
import VueResizable from 'vue-resizable'
export default {
name: "YourApp",
components: {VueResizable}
}
2.将可调整大小的元素插入组件。
<template>
<vue-resizable>
<div class="resizable-content"></div>
</vue-resizable>
</template>
3.默认props来配置可调整大小的组件。
width: {
default: 200,
type: [Number, String]
},
minWidth: {
default: 0,
type: Number
},
maxWidth: {
default: undefined,
type: Number,
},
height: {
default: 200,
type: [Number, String]
},
minHeight: {
default: 0,
type: Number
},
maxHeight: {
default: undefined,
type: Number
},
left: {
default: 0,
type: [Number, String]
},
top: {
default: 0,
type: [Number, String]
},
active: {
default: () => ['r', 'rb', 'b', 'lb', 'l', 'lt', 't', 'rt'],
validator: (val) => ['r', 'rb', 'b', 'lb', 'l', 'lt', 't', 'rt'].filter(value => val.indexOf(value) !== -1).length === val.length,
type: Array
},
fitParent: {
default: false,
type: Boolean
},
dragSelector: {
default: undefined,
type: String
}
4.事件处理程序。