v-resize

0.1.1 • Public • Published

v-resize

NPM version Node version NPM download Dependencies License

NPM

适用于 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

Package Sidebar

Install

npm i v-resize

Weekly Downloads

25

Version

0.1.1

License

MIT

Last publish

Collaborators

  • heynext
  • cybernika