用于可拖动和可调整大小元素的轻量级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>

---

官网：https://github.com/kirillmurashov/vue-drag-resize

演示：https://www.vue365.cn/code_demo.php?id=1337

GitHub下载：https://github.com/kirillmurashov/vue-drag-resize/archive/master.zip