jq960素材网

当前位置: 主页 > JQ/JS插件 > vue插件 >

vue-drag-resize vue拖拽组件

官方网址:http:// 下载次数:
插件描述

插件介绍

这是一个功能强大的拖拽组件,它可以用于拖拽,改变大小,设置重叠效果等。它支持触摸事件。


安装

通过npm安装

$ npm i -s vue-drag-resize

插件应用

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>



顶一下
(2)
66.7%
踩一下
(1)
33.3%
------分隔线----------------------------
栏目列表
推荐素材