Vue Moveable
made with Vuejs

Vue Moveable

这是一个元素转换组件。

简介及使用教程

Vue Moveable是一个元素转换组件,使目标可拖动、可调整大小、可伸缩,可扭曲、可旋转、可收缩、可分组和可捕捉。

特征

  • 支持多种转换动作
  • 支持SVG元素(SVG、路径、直线、椭圆、g、RECT、.等)
  • 支持主要浏览器
  • 支持三维变换

安装

Npm

npm i vue-moveable

Yarn

yarn add vue-moveable

使用

引入并注册组件

import Moveable from 'vue-moveable';

...
 components: {
    Moveable,
 }
...

HTML结构

  <Moveable
    class="moveable"
    v-bind="moveable"
    @drag="handleDrag"
    @resize="handleResize"
    @scale="handleScale"
    @rotate="handleRotate"
    @warp="handleWarp"
    @pinch="handlePinch"
  >
    <span>Vue Moveable</span>
  </Moveable>

数据及事件方法

export default {
  name: 'app',
  components: {
    Moveable,
  },
  data: () => ({
    moveable: {
      draggable: true,
      throttleDrag: 0,
      resizable: false,
      throttleResize: 1,
      keepRatio: false,
      scalable: true,
      throttleScale: 0,
      rotatable: true,
      throttleRotate: 0,
      pinchable: true, // ["draggable", "resizable", "scalable", "rotatable"]
      origin: false,
    }
  }),
  methods: {
    handleDrag({ target, transform }) {
      console.log('onDrag left, top', transform);
      target.style.transform = transform;
    },
    handleResize({
      target, width, height, delta,
    }) {
      console.log('onResize', width, height);
      delta[0] && (target.style.width = `${width}px`);
      delta[1] && (target.style.height = `${height}px`);
    },
    handleScale({ target, transform, scale }) {
      console.log('onScale scale', scale);
      target.style.transform = transform;
    },
    handleRotate({ target, dist, transform }) {
      console.log('onRotate', dist);
      target.style.transform = transform;
    },
    handleWarp({ target, transform }) {
      console.log('onWarp', transform);
      target.style.transform = transform;
    },
    handlePinch({ target }) {
      console.log('onPinch', target);
    },
  }
}

示例

image.png

作者

Daybrush (Younkue Choi)

@daybrush

相关项目

这是一个Vue.js 2打字机效果组件 。
这是一个基于Vue.js的循环图像序列播放器。
这是一个基于Vue.js的模拟命令行效果的动画组件。
Vue.js的文本幻灯片组件。
这是一个基于Vue.js的内容切换组件。
这是一个使用Vue.js的加载Spinner的集合。
这是一个实现Material设计风格的纹波效果的插件。