Vue.js中调整和拖动元素的大小– vue-drag-resize

Vue.js中调整和拖动元素的大小– vue-drag-resize
插件名称 vue-drag-resize
版本号 v2.0.0
发布时间 2020年7月11日
插件作者 kirillmurashov

用于可拖动和可调整大小元素的轻量级Vue组件。

特征:

  • 所有道具都是反应性的
  • 支持触摸事件
  • 使用可拖动,可调整大小或同时使用
  • 定义棒以调整大小
  • 为可调整大小的组件保存长宽比
  • 限制尺寸和移动到父元素
  • 限制拖动到垂直或水平轴

安装和下载:

# NPM
$ npm install vue-drag-resize --save

变更日志:

v2.0.0(20/07/04)

  • Vue 3支持
  • 完全重新设计的代码
  • 改善性能

v1.4.2(07/31/2020)

  • 错误修正

v1.4.0(07/09/2020)

  • 添加:父母的transform:scale()支持
  • 补充:智能电网捕捉功能
  • 补充:stickSize一个组件道具
  • 在vue-drag-resize中添加了“ contentClass”属性
  • 修复:将isDraggable设置为false,无法激活该元素
  • 修复:不触发dragstop和resizestop
  • 修复:仅当当前处于活动状态并且调整大小/拖动时,才停止传播并阻止事件

使用:

注册组件:

import Vue from 'vue'
import VueDragResize from 'vue-drag-resize'

Vue.component('vue-drag-resize', VueDragResize)

使用组件:

<template>
    <div id="app">
        <VueDragResize :isActive="true" :w="200" :h="200" v-on:resizing="resize" v-on:dragging="resize">
            <h3>Hello World!</h3>
            <p>{{ top }} х {{ left }} </p>
            <p>{{ width }} х {{ height }}</p>
        </VueDragResize>
    </div>
</template>

<script>
    import VueDragResize from 'vue-drag-resize';

    export default {
        name: 'app',

        components: {
            VueDragResize
        },

        data() {
            return {
                width: 0,
                height: 0,
                top: 0,
                left: 0
            }
        },

        methods: {
            resize(newRect) {
                this.width = newRect.width;
                this.height = newRect.height;
                this.top = newRect.top;
                this.left = newRect.left;
            }
        }
    }
</script>