v-resize

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: 缩放的方向
  • 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