vue通过拖放调整元素大小– VueResizable

vue通过拖放调整元素大小– VueResizable
插件名称 VueResizable
版本号 v2.0.0
发布时间 2020年4月18日
插件作者 nikitasnv

一个小型且可配置的可调整大小的组件,允许用户使用拖放来调整元素的大小。

变更日志:

v2.0.0(03/06/2021)

  • Vue 3的更新

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.事件处理程序。

  • mount(eventName,left,top,width,height):安装组件后调用
  • destroy(eventName,left,top,width,height):在销毁组件之前调用
  • resize:start(eventName,left,top,width,height):单击活动处理程序之一后调用
  • resize:move(eventName,left,top,width,height):在拖动处理程序时调用
  • resize:end(eventName,left,top,width,height):调整大小后释放鼠标按钮时调用
  • drag:start(eventName,left,top,width,height):单击拖动元素之一后调用
  • drag:move(eventName,left,top,width,height):拖动拖动元素时调用
  • drag:end(eventName,left,top,width,height):拖动后释放鼠标按钮时调用