# vue-ddr

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

Latest version **0.0.1** (published 2022-11-08) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue-ddr
pnpm add vue-ddr
yarn add vue-ddr
bun add vue-ddr
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2022-11-08 |
| First published | 2022-11-08 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 301.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | yes |
| Maintainers | iamzhaoqing |

## Links

- npm: https://www.npmjs.com/package/vue-ddr
- npm.io page: https://npm.io/package/vue-ddr

## Recent versions

- 0.0.1 (latest) — 2022-11-08

## README

# vue-drag-resize

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

todo

+ 同时拖动多个

## 安装

```
npm install --save vue-drag-resize
```

## 使用

```vue
<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    | 是否可旋转  |

---
_Source: https://npm.io/package/vue-ddr · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._