vue-ddr

vue-drag-resize

一个可拖拽可缩放可旋转的 Vue 组件。

todo

• 同时拖动多个

安装

npm install --save vue-drag-resize

使用

<template>
    <div class="wrap">
        <drag-resize
            v-bind="info"
            rotatable
            parent
            :active="active"
            class="bg-#f5f5f5"
            @activated="updateCurrentCom"
            @change="handleChange"
        >
        </drag-resize>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';

interface Rect {
    x: number;
    y: number;
    w: number;
    h: number;
    angle: number;
}

const active = ref(true);
const info = reactive({
    w: 200,
    h: 100,
    z: 1,
    x: 100,
    y: 100,
    angle: 0,
    active: false,
});

const updateCurrentCom = () => {
    active.value = true;
};
const handleChange = (rect: Rect) => {
    info.x = rect.x;
    info.y = rect.y;
    info.w = rect.w;
    info.h = rect.h;
    info.angle = rect.angle;
};
</script>

<style scoped lang="less">
.wrap {
    position: relative;
    height: 400px;
    background-color: #fafafc;
    overflow: hidden;
}
</style>

属性