vue-drag-resize插件介绍

安装

$ npm i -s vue-drag-resize

引入

全局引入

import Vue from "vue";
import VueDragResize from "vue-drag-resize";

Vue.component("vue-drag-resize", VueDragResize);

组件内引入

<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>

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; 
        }, 
    }, 
};

API

基本参数

函数方法