vue-drag-resize使用

熊他丫的

已于 2025-03-27 17:37:36 修改

阅读量447

点赞数 5

文章标签： vue.js

于 2025-03-27 17:30:38 首次发布

本文链接：https://blog.csdn.net/m0_62791728/article/details/146565517

版权

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)

或者哪里需要哪里引入

import VueDragResize from 'vue-drag-resize'

示例

可以随意拖拽

<template>
    <div id="app">
        <VueDragResize :isActive="true"  :x="top" :y="left" :w="width" :h="height"
        @resizing="resize" @dragging="resize">
            <h3>Hello World!</h3>
            <div>哈哈哈哈哈哈</dfiv>
        </VueDragResize>
    </div>
</template>

<script>
    import VueDragResize from 'vue-drag-resize'; 
    export default {
        name: 'app', 
        components: {
            VueDragResize
        }, 
        data() {
            return {
                width: 200,
                height: 200,
                top: 0,
                left: 0
            }
        }, 
        methods: {
            resize(newRect) { 
                this.top = newRect.top;
                this.left = newRect.left;
            }
        }
    }
</script>

常用属性

parentLimitation（组件范围限制为其父大小，不加默认在可视窗口随意拖动）

通常配合parentW，parentH一起使用

<vue-drag-resize :parentLimitation="true">

parentW（定义父元素的初始宽度），parentH（定义父元素的初始高度）

如果未指定，则自动计算。使用此参数，可以设置组件的边界区域，并在实时调整大小时使用它。

<vue-drag-resize :parentW="2000"  :parentH="2000">

isResizable（是否应调整大小）

<vue-drag-resize :isResizable="false">

w (定义组件的初始宽度) minw(定义组件的初始宽度)

<vue-drag-resize :w="200">
<vue-drag-resize :minh="50">

h (定义组件的初始高度) minh(定义组件的最小高度)

<vue-drag-resize :h="200">
<vue-drag-resize :minh="50">

x (定义组件的初始X位置) y (定义组件的初始Y位置)

<vue-drag-resize :x="0" :y="0">

z (定义组件的zindex(层级))

<vue-drag-resize :z="999">

事件

clicked（点击事件）

<vue-drag-resize @clicked="onActivated">

activated（单击组件时调用，以显示句柄）

<vue-drag-resize @activated="onActivated">

deactivated（每当用户单击组件外部的任何位置时调用，以便将其停用）

<vue-drag-resize @deactivated="onDeactivated">

resizing（每当组件调整大小时调用）

<vue-drag-resize @resizing="onResizing">
function onResizing(e){
    console.log(e)
   //  { 
   //     left: Number,
   //     top: Number,
   //     width: Number,
   //     height: Number
   // } 
}