ES Drager 拖拽组件
| ES Drager | |||
|---|---|---|---|
| Draggable | Resizable | Rotatable | |
|
|
|
|
🌈介绍
基于 vue3.x + CompositionAPI + typescript + vite 的可拖拽、缩放、旋转的组件
- 拖拽&区域拖拽
- 支持缩放
- 旋转
- 网格拖拽缩放
综合案例
下面是基于 es-drager 实现的一个简单可视化拖拽编辑器
相关文章
⚡ 使用说明
安装依赖
npm i es-drager
全局注册
import { createApp } from 'vue'
import App from './App.vue'
import 'es-drager/lib/style.css'
import Drager from 'es-drager'
createApp(App)
.component('es-drager', Drager)
.mount('#app')- 使用
<template>
<es-drager>
drager
</es-drager>
</template>组件中直接使用
<template>
<Drager>
drager
</Drager>
</template>
<script setup lang='ts'>
import Drager from 'es-drager'
</script>浏览器直接引入
直接通过浏览器的 HTML 标签导入 es-drager，然后就可以使用全局变量 ESDrager 了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/es-drager/lib/style.css">
<title>Document</title>
</head>
<body>
<div id="app">
<es-drager>drager</es-drager>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/es-drager"></script>
<script>
const { createApp } = Vue
const app = createApp({})
app.use(ESDrager)
app.mount('#app')
</script>
</body>
</html>Drager API
Drager 属性
| 属性名 | 说明 | 类型 | 默认 |
|---|---|---|---|
| tag | component组件的is属性 | ^[string] | div |
| width | 宽度 | ^[number] | 100 |
| height | 高度 | ^[number] | 100 |
| left | 横坐标偏移 | ^[number] | 0 |
| top | 纵坐标偏移 | ^[number] | 0 |
| angle | 旋转角度 | ^[number] | 0 |
| color | 颜色 | ^[string] | #3a7afe |
| resizable | 是否可缩放 | ^[boolean] | true |
| rotatable | 是否可旋转 | ^[boolean] | - |
| boundary | 是否判断边界(最近定位父节点) | ^[boolean] | - |
| disabled | 是否禁用 | ^[boolean] | - |
| minWidth | 最小宽度 | ^[number] | - |
| minHeight | 最小高度 | ^[number] | - |
| maxWidth | 最大宽度 | ^[number] | - |
| maxHeight | 最大高度 | ^[number] | - |
| selected | 控制是否选中 | ^[boolean] | - |
| checkCollision | 是否开启碰撞检测 | ^[boolean] | - |
| snapToGrid | 开启网格 | ^[boolean] | - |
| gridX | 网格X大小 | ^[number] | 50 |
| gridY | 网格Y大小 | ^[number] | 50 |
| scaleRatio | 缩放比 | ^[number] | 1 |
| disabledKeyEvent | 禁用方向键移动 | ^[boolean] | - |
| border | 是否显示边框 | ^[boolean] | true |
| aspectRatio | 宽高缩放比 | ^[boolean] | - |
| equalProportion | 宽高等比缩放 | ^[boolean] | - |
| resizeList | 显示的缩放handle列表，top, bottom, left, right, top-left, top-right, bottom-left, bottom-right
|
^[string[]] | - |
Drager 事件
| 事件名 | 说明 | 类型 |
|---|---|---|
| change | 位置、大小改变 | ^[Function](dragData) => void
|
| drag | 拖拽中 | ^[Function](dragData) => void
|
| drag-start | 拖拽开始 | ^[Function](dragData) => void
|
| drag-end | 拖拽结束 | ^[Function](dragData) => void
|
| resize | 缩放中 | ^[Function](dragData) => void
|
| resize-start | 缩放开始 | ^[Function](dragData) => void
|
| resize-end | 缩放结束 | ^[Function](dragData) => void
|
| rotate | 旋转中 | ^[Function](dragData) => void
|
| rotate-start | 旋转开始 | ^[Function](dragData) => void
|
| rotate-end | 旋转结束 | ^[Function](dragData) => void
|
- dragData 类型
export type DragData = {
width: number
height: number
left: number
top: number
angle: number
}Drager 插槽
| 插槽名 | 说明 |
|---|---|
| default | 自定义默认内容 |
| resize | 缩放handle |
| rotate | 旋转handle |