【Vue3】Vue3拖拽组件级封装--可快速上手

【Vue3】Vue3拖拽组件级封装–可快速上手

基于 vue3-draggable-resizable

二次封装Vue3+Ts

1、安装依赖

npm install vue3-draggable-resizable

2、src/components下创建组件V3Draggable.vue

V3Draggable.vue

<template>
    <Vue3DraggableResizable ref="draggable" :initW="initW" :initH="initH" v-model:x="x" v-model:y="y" v-model:w="w"
        v-model:h="h" v-model:active="active" :draggable="draggable" :resizable="resizable"
        :lockAspectRatio="lockAspectRatio" :disabledX="disabledX" :disabledY="disabledY" :disabledW="disabledW"
        :disabledH="disabledH" :parent="parent" :classNameDraggable="classNameDraggable" :classNameResizable="classNameResizable"
        :classNameDragging="classNameDragging" :classNameResizing="classNameResizing" @activated="print('activated')"
        @deactivated="print('deactivated')" @drag-start="dragStart" @resize-start="print('resize-start')"
        @dragging="dragging" @resizing="print('resizing')" @drag-end="dragEnd" @resize-end="print('resize-end')">
        <slot>
            <span>这是一个可操作的盒子</span>
        </slot>
    </Vue3DraggableResizable>
</template>
  
<script setup lang="ts">
import { ref } from 'vue'
import Vue3DraggableResizable from 'vue3-draggable-resizable'
//default styles
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'

/**
 * 
 * @description 组件的props
 * @property {number} initW 初始宽度
 * @property {number} initH 初始高度
 * @property {boolean} draggable 是否可拖动
 * @property {boolean} resizable 是否可缩放
 * @property {boolean} lockAspectRatio 是否保持长宽比
 * @property {boolean} disabledX 是否禁用x轴拖动
 * @property {boolean} disabledY 是否禁用y轴拖动
 * @property {boolean} disabledW 是否禁用宽度拖动
 * @property {boolean} disabledH 是否禁用高度拖动
 * @property {boolean} parent 是否将组件的拖动和缩放限制在其父节点内，即组件不会超出父节点，默认开启
 * @event {Function} activated 激活事件
 * @event {Function} deactivated 失活事件
 * @event {Function} drag-start 拖动开始事件
 * @event {Function} resize-start 缩放开始事件
 * @event {Function} dragging 拖动中事件
 * @event {Function} resizing 缩放中事件
 * @event {Function} drag-end 拖动结束事件
 * @event {Function} resize-end 缩放结束事件
 * @property {string} classNameDraggable 自定义组件的类名，该类名在组件是“可拖动”时显示
 * @property {string} classNameResizable 自定义组件的类名，该类名在组件是“可缩放”时显示
 * @property {string} classNameDragging 自定义组件的类名，该类名在组件是“拖动时”时显示
 * @property {string} classNameResizing 自定义组件的类名，该类名在组件是“缩放时”时显示
 * 
 */
type Props = {
    initW?: number,
    initH?: number,
    draggable?: boolean,
    resizable?: boolean,
    lockAspectRatio?: boolean,
    disabledX?: boolean,
    disabledY?: boolean,
    disabledW?: boolean,
    disabledH?: boolean,
    parent?: boolean,
    classNameDraggable?: string,
    classNameResizable?: string,
    classNameDragging?: string,
    classNameResizing?: string,

}
withDefaults(defineProps<Props>(), {
    initW: 200,
    initH: 200,
    draggable: true,
    resizable: true,
    lockAspectRatio: false,
    disabledX: false,
    disabledY: false,
    disabledW: false,
    disabledH: false,
    parent: true,
    classNameDraggable: 'draggable',
    classNameResizable: 'resizable',
    classNameDragging: 'dragging',
    classNameResizing: 'resizing',
})

const x = ref(100)
const y = ref(100)
const w = ref(100)
const h = ref(100)
const active = ref(false)

const cursor = ref('')
const print = (val: string) => {
    console.log(val)
}

const dragStart = () => {
    cursor.value = 'move'
}
const dragging = () => {
    cursor.value = 'move'
}
const dragEnd = () => {
    cursor.value = ''
}

</script>
<style>
.vdr-container {
    border: 1px solid #333;
    cursor: v-bind(cursor);
}
</style>

3、使用

例如：App.vue

<template>
    <div class="wrapper">
        <V3Draggable></V3Draggable>
    </div>
</template>

<script setup lang="ts">
import V3Draggable from "@/components/V3Draggable.vue";

</script>

<style>
.wrapper{
    width: 600px;
    height: 500px;
    background-color: #eee;
}
</style>

忠言逆耳：靠自己不如靠别人