0.1.1 • Published 6 years ago

v-resize v0.1.1

Weekly downloads
3
License
MIT
Repository
github
Last release
6 years ago

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可拖拽时的 classString--vrz-resizable
draggedClass鼠标按下时的 classString--vrz-dragged
resizingClass缩放时的 classString--vrz-resizing
directions可拖拽缩放的方向Array'top', 'bottom', 'left', 'right''bottom', 'right'
zoneSize识别区域大小Number--4
onResize缩放时的回调Funtionparams: 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