1.3.0 • Published 6 months ago

es-drager v1.3.0

Weekly downloads
-
License
MIT
Repository
github
Last release
6 months ago

ES Drager 拖拽组件

🌈介绍

基于 vue3.x + CompositionAPI + typescript + vite 的可拖拽、缩放、旋转的组件

  • 拖拽&区域拖拽
  • 支持缩放
  • 旋转
  • 网格拖拽缩放
  • 拖拽编辑器

运行项目

# 拉取项目
git clone https://github.com/vangleer/es-drager.git

# 安装依赖
pnpm install

# 运行项目
pnpm dev

# 打包drager组件
pnpm build

# 打包文档
pnpm docs:build

主要目录介绍

目录功能说明
packages/docs项目示例文档、编辑器展示
packages/editor编辑器核心代码
packages/drageres-drager组件

综合案例

下面是基于 es-drager 实现的一个简单可视化拖拽编辑器

ES Drager Editor

相关文章

可拖拽、缩放、旋转组件实现细节

网格效果及使用方法

辅助线和撤销回退

元素组合与拆分

菜单操作栏、json数据导入导出

⚡ 使用说明

安装依赖

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 属性

属性名说明类型默认
tagcomponent组件的is属性^stringdiv
type类型，rect, text, image^stringrect
width宽度^number100
height高度^number100
left横坐标偏移^number0
top纵坐标偏移^number0
angle旋转角度^number0
skew倾斜角度^Array0, 0
color颜色^string#3a7afe
resizable是否可缩放^booleantrue
rotatable是否可旋转^boolean-
skewable 是否可倾斜^boolean-
boundary是否判断边界(最近定位父节点，考虑性能谨慎使用。只支持移动，缩放在v1.3后不支持)^boolean-
disabled是否禁用^boolean-
minWidth最小宽度^number-
minHeight最小高度^number-
maxWidth最大宽度^number-
maxHeight最大高度^number-
selected控制是否选中^boolean-
checkCollision是否开启碰撞检测^boolean-
snapToGrid开启网格^boolean-
gridX网格X大小^number50
gridY网格Y大小^number50
snap开启吸附^boolean-
snapThreshold吸附阈值^number10
markline辅助线(可自定义)^boolean^Function-
extraLines添加除了es-drager元素以外的对齐线，例如添加中心点对齐(可参考)^Function
scaleRatio缩放比^number1
disabledKeyEvent禁用方向键移动^boolean-
border是否显示边框^booleantrue
aspectRatio宽高缩放比^number-
equalProportion宽高等比缩放(该属性和aspectRatio互斥，同时使用会存在问题)^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
skew倾斜中^Function(dragData) => void
skew-start倾斜开始^Function(dragData) => void
skew-end倾斜结束^Function(dragData) => void
focus获取焦点/选中^Function(selected) => void
blur失去焦点/非选中^Function(selected) => void
  • dragData 类型
export type DragData = {
  width: number
  height: number
  left: number
  top: number
  angle: number
  skew: number[],
}

Drager 插槽

插槽名说明
default自定义默认内容
resize缩放handle
rotate旋转handle
skew倾斜handle
dragresizerotatevue-dragervue-drag-resizevue-drageres-drager
@everything-registry/sub-chunk-1595lbbtestumoeditorjuice-editorumoteam-editor-wjl@ryznekd28/canvaseditor@ryznekd28/testermint689hh-visual-dragh-vue3-editor@xinayus/editor@umoteam/editor@vui-admin/visual-editordatavis-editordatavis-editor-flowbid-editorfinething-umo
1.3.0

6 months ago

1.2.14

8 months ago

1.2.13

8 months ago

1.2.12

9 months ago

1.2.11

1 year ago

1.2.10

1 year ago

1.2.9

1 year ago

1.2.8

1 year ago

1.2.7

2 years ago

1.2.6

2 years ago

1.2.5

2 years ago

1.2.4

2 years ago

1.2.3

2 years ago

1.2.2

2 years ago

1.2.0

2 years ago

1.2.1

2 years ago

1.1.9

2 years ago

1.1.8

2 years ago

1.1.7

2 years ago

1.1.6

2 years ago

1.1.5

2 years ago

1.1.4

2 years ago

1.1.0

2 years ago

1.0.0

2 years ago

1.1.3

2 years ago

1.1.2

2 years ago

0.3.6

2 years ago

0.3.0

2 years ago

0.3.5

2 years ago

0.3.2

2 years ago

0.3.1

2 years ago

0.3.4

2 years ago

0.3.3

2 years ago

0.2.9

2 years ago

0.2.8

2 years ago

0.2.7

2 years ago

0.2.6

2 years ago

0.2.3

2 years ago

0.2.2

2 years ago

0.2.1

2 years ago

0.2.0

2 years ago

0.1.0

2 years ago

0.0.8

2 years ago

0.0.6

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago