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>

属性

| Name | Type | Default | Example | Description | | --------- | ------- | ------- | ------- | ----------- | | x | number | 0 | 0 | left 值 | | y | number | 0 | 0 | top 值 | | w | number | 200 | 200 | 宽度 | | h | number | 100 | 100 | 高度 | | z | number | 1 | 1 | z-index | | minW | number | 0 | 500 | 最小宽度 | | minH | number | 0 | 200 | 最小高度 | | angle | number | 0 | 90 | 旋转角度 | | scale | number | 1 | 2 | 缩放比例 | | active | boolean | false | true | 是否选中 | | rotatable | boolean | false | true | 是否可旋转 |