https://github.com/gausszhou/vue3-drag-resize-rotate

一个Vue3.0组件，支持拖拽，拉伸，旋转，放缩，自动对齐；A Component for Vue.js 3.0;
https://github.com/gausszhou/vue3-drag-resize-rotate

Last synced: 2 days ago
JSON representation

一个Vue3.0组件，支持拖拽，拉伸，旋转，放缩，自动对齐；A Component for Vue.js 3.0;

• Host: GitHub
• URL: https://github.com/gausszhou/vue3-drag-resize-rotate
• Owner: gausszhou
• License: mit
• Created: 2022-03-27T06:23:23.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2024-04-11T17:07:07.000Z (8 months ago)
• Last Synced: 2024-12-02T04:30:50.926Z (20 days ago)
• Language: Vue
• Homepage: https://gausszhou.github.io/vue3-drag-resize-rotate/
• Size: 1.78 MB
• Stars: 162
• Watchers: 3
• Forks: 27
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - gausszhou/vue3-drag-resize-rotate - 一个Vue3.0组件，支持拖拽，拉伸，旋转，放缩，自动对齐；A Component for Vue.js 3.0; (Vue)

README

        
# vue3-drag-resize-rotate

[![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE) [![Npm Package](https://img.shields.io/npm/v/@gausszhou/vue3-drag-resize-rotate.svg)](https://www.npmjs.com/package/@gausszhou/vue3-drag-resize-rotate)

## Live Demo

[中文在线演示地址](https://gausszhou.github.io/vue3-drag-resize-rotate)

## Quick Start

```shell

npm install  @gausszhou/vue3-drag-resize-rotate

```

```js

import { createApp } from "vue";

import VueDragResizeRotate from "@gausszhou/vue3-drag-resize-rotate";

import "@gausszhou/vue3-drag-resize-rotate/lib/bundle.esm.css";

const app = createApp(App);

// use

app.use(VueDragResizeRotate);

// or component

// app.component(VueDragResizeRotate.name, VueDragResizeRotate);

app.mount("#app");

```

## Props

| Prop      | Description   |

| --------- | ------------- |

| draggable | Enable drag   |

| resizable | Enable resize |

| rotatable | Enable rotate |

| w         | width         |

| h         | height        |

| x         | left          |

| y         | top           |

| z         | Zindex        |

| r         | rotate angle  |

## Emits

| Event         | Description              |

| ------------- | ------------------------ |

| dragging      | on dragging              |

| dragstop      | on drag stop             |

| resizing      | on resizing              |

| resizestop    | on resize stop           |

| rotating      | on rotating              |

| rotatestop    | on rotate stop           |

| activated     | on activeed              |

| deactivated   | on deactiveed            |

| refLineParams | on reference line change |

## Code Reference

```shell

https://github.com/gausszhou/vue-drag-resize-rotate

```

## Thanks

感谢 `gogocode` 提供的代码转换服务