vue-directive-resize v1.0.5

vue-directive-resize

一个通过拖拽改变元素宽度的 vue 自定义指令（目标元素如果是 input 等不支持子元素的标签，不会生效）

安装

npm i vue-directive-resize

注册

全局注册指令:

import vueDirectiveResize from 'vue-directive-resize'

Vue.use(vueDirectiveResize)

也可以传第 2 个参数 options，进行自定义:

// 以下均为默认值
Vue.use(vueDirectiveResize, {
  name: 'resize',               // 指令名
  color: 'rgba(0, 0, 0, 0.5)',  // 拖拽条颜色
  throttleMs: 0                 // 节流毫秒数（越小越流畅，与性能成反比）
})

使用

// 传数组则拖拽宽度范围为 100px 到 300px
<div v-resize="[100, 300]"></div>
// 传类数组的字符串则拖拽宽度范围为 100px 到 300px
<div v-resize="`[100, 300]`"></div>
// 传值非类数组的字符串或者其他类型则不限制最大宽度，最小宽度为 0px
<div v-resize="[100, 300"></div>
// 不传值也不限制最大宽度，最小宽度为 0px
<div v-resize></div>
// 可以通过 v-on:resize 监听宽度的变化
<div v-resize @resize="width => { console.log(width) }"></div>