v-resize

resize directive for Vue 2.0
894 5
Install
npm install v-resize
Latest Version:0.1.1
Vue:2
License:MIT
Last Updated:Nov 30, 2023
Links: GitHub  ·  npm
Maintainer: heynext

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

Related Packages

v-resizable

Vue directive for resizable elements

25,554 16
vue-resize-split-pane

Splittable and resizable panes for Vue.js

9,257
v-resize-observer

Resize observer for Vue. Detect size changes of DOM elements. Support Vue's dire...

31,577 4
vue-resizables

The resize utilities of Vue.

14,264 14
vue-lazysizes

If you use Lazysizes this vue-directive updates img element if src attribute is...

11,786

Version History

Version Released Vue License
0.1.1 ^2.4.4 MIT
0.1.0 ^2.4.4 MIT