adrag
v2.1.7
Published
一个帮助你管理可视化中拖拽的流程与控制的开箱即用的VUE2.6.X(10)组件
Downloads
13
Readme
Install and basic usage
一个可以帮助你控制并管理拖拽流程的开箱即用的VUE组件(vue2)
$ npm i -s adrag
Register the component:
import {fragment,provider} from "adrag";
Vue.component('provider', provider)
Vue.component('fragment', fragment)
Use the component:
<template>
<div>
<div @click="aiderComputed">aider开启</div>
<div @click="aiderClear">aider关闭</div>
<div @click="undo">undo</div>
<div @click="zoomOut">放大</div>
<div @click="zoomIn">缩小</div>
<fragment
tag="1"
render-key="123"
:put-component="components[0]"
:modal-component="components[2]"
:default-component-height="100"
:default-component-width="100"
:put-offset-x="10"
:put-offset-y="20"
:move-offset-y="0"
:move-offset-x="0"
:default-component-z-index="999"
@fragmentDown="fragmentDown"
@fragmentMove="fragmentMove"
@fragmentOver="fragmentOver"
>
<template #display>
<div>123</div>
</template>
<template #hide>
<div>345</div>
</template>
</fragment>
<provider ref="provider"
:tags="['1']"
:modal-offset-x="0"
:modal-offset-y="0"
style="background: antiquewhite;top:300px">
</provider>
</div>
</template>
<script>
import fragment from "@/ADrag4/view/fragment";
import provider from "@/ADrag4/view/provider";
import drag from '@/component/d'
import o from '@/component/o'
import f from '@/component/p'
export default {
name: "App",
components: {fragment, provider},
data: () => {
return {
aider: false,
components: [drag, o, f],
};
},
mounted() {
this.beforeStart()
this.$refs.provider.on('componentClick', (o) => {
console.log(o, 'componentClick')
})
this.$refs.provider.on('dragging', (o) => {
console.log(o, 'dragging')
})
this.$refs.provider.on('dragStop', (o) => {
console.log(o, 'dragStop')
})
this.$refs.provider.on('resizing', (o) => {
console.log(o, 'resizing')
})
this.$refs.provider.on('areaClick', (o) => {
console.log(o, 'areaClick')
})
this.$refs.provider.on('resizeStop', (o) => {
console.log(o, 'resizeStop')
})
this.$refs.provider.on('hover', (o) => {
console.log(o, 'hover')
})
this.$refs.provider.on('leave', (o) => {
console.log(o, 'leave')
})
this.$refs.provider.on('lineClick', (o) => {
console.log(o, 'lineClick')
})
this.$refs.provider.on('menuItemClick', (o) => {
console.log(o, 'menuItemClick')
})
},
methods: {
zoomOut() {
this.$refs.provider.amplification(10)
},
zoomIn() {
this.$refs.provider.narrow(10)
},
toConnect() {
},
undo() {
this.$refs.provider.undo()
if (this.aider) {
this.$refs.provider.openAider()
} else {
this.$refs.provider.closeAider()
}
},
aiderClear() {
this.aider = false
this.$refs.provider.closeAider()
},
aiderComputed() {
this.aider = true
this.$refs.provider.openAider()
},
fragmentMove(p) {
console.log(p, 'fragmentMove')
},
fragmentDown(p) {
console.log(p, 'fragmentDown')
},
fragmentOver(p) {
console.log(p, 'fragmentOver')
},
},
};
</script>
<style>
</style>
Props of fragment
tag
Type: Boolean
|String
|Number
Required: false
Default: a_default_fragment
确定组件标识 用于被 容器区分 (provider)
<fragment tag='tag'>
moveOffsetX
Type: Number
Required: false
Default: 0
鼠标绑定的拖拽DOM的横向偏移量
<fragment :moveOffsetX="10">
moveOffsetY
Type: Number
Required: false
Default: 0
鼠标绑定的拖拽DOM的纵向偏移量
<fragment :moveOffsetY="10">
putOffsetX
Type: Number
Required: false
Default: 0
容器内第一次放置组件时的横向偏移量,一般与moveOffsetX相同
<fragment :putOffsetX="10">
putOffsetY
Type: Number
Required: false
Default: 0
容器内第一次放置组件时的纵向偏移量,一般与moveOffsetY相同
<fragment :putOffsetY="10">
renderKey
Type: String
Required: true
Default: ''
用于渲染标识,它必须是truth的
<fragment renderKey="renderKey">
defaultComponentWidth
Type: Number
Required: false
Default: 100
定义组件放置后的初始长度。
<fragment :defaultComponentWidth="100">
defaultComponentHeight
Type: Number
Required: false
Default: 100
定义组件放置后的初始高度。
<fragment :defaultComponentHeight="100">
defaultComponentZIndex
Type: Number
Required: false
Default: 999
定义组件放置后的初始层级。
<fragment :defaultComponentZIndex="100">
putComponent
Type: VUEcomponent
Required: true
Default: {}
放置的组件
import COMPONENT from 'COMPONENT'
components:{COMPONENT}
<fragment :putComponent="COMPONENT">
modalComponent
Type: VUEcomponent
Required: false
Default: {}
绑定的弹窗组件
import COMPONENT from 'COMPONENT'
components:{COMPONENT}
<fragment :modalComponent="COMPONENT">
event of fragment
- EventPipe 是封装的事件类,它可以修改拖拽过程中的元素 详细见addraging(npm)
fragmentDown
params: pipe
paramsType: EventPipe
开始拖拽,鼠标按下
<fragment @fragmentDown="fragmentDown">
methods:{
fragmentDown(pipe){
...
}
}
fragmentMove
params: pipe
paramsType: EventPipe
拖拽中
<fragment @fragmentMove="fragmentMove">
methods:{
fragmentMove(pipe){
...
}
}
fragmentOver
params: pipe
paramsType: EventPipe
拖拽结束
<fragment @fragmentOver="fragmentOver">
methods:{
fragmentOver(pipe){
...
}
}
Props of provider
tags
Type: Array
Required: true
Default: [a_default_fragment]
用于容纳对应tag在tags内的组件,如果组件tag不在其tags内,那么那个组件将不能在其上放置
<provider :tags="['tag']"">
pid
Type: String
Required: false
Default: providerId
同容器的id
<provider pid="id">
modalOffsetY
Type: Number
Required: false
Default: 0
容器上组件触发的弹窗纵向偏移量
<provider :modalOffsetY="0">
modalOffsetX
Type: Number
Required: false
Default: 0
容器上组件触发的弹窗横向偏移量
<provider :modalOffsetX="0">
parentH
Type: Number
Required: false
Default: 2000
容器高度
<provider :parentH="2000">
parentW
Type: Number
Required: false
Default: 2000
容器宽度
<provider :parentW="2000">
refs function of provider
- provider内的所有内容是不可见的,当你需要修改内容时,你需要通过$refs调用函数的方式来达到目的
- 数据结构
/*
* x x,
* y y,
* w 宽,
* h 高,
* f 聚焦,
* z 层级,
* c 组件,
* m 弹窗组件
* v 显示,
* id 标识
* renderData 数据
* shadow 链接效果
* firstMounted 组件是否需要渲染,当你渲染的组件为图表时,这会很实用,你在组件的mounted状态内通过该属性来判断是否需要渲染,从而有效规避数据同步时组件数组指向变化导致的组件多次挂载渲染
*/
interface render {
x:number,
y:number,
w:number,
h:number,
f:boolean,
z:number,
c:VueCompoent,
v:boolean,
m:VueCompoent,
id:(number|string)[],
tag:number|string|boolean,
renderData:any,
center:number[],
shadow:string,
firstMounted:boolean
}
openAnimation
params: (speed,buoyWidth)
paramsNote: (动画速度默认30,动点长度默认10)
paramsType: (number,number)
开启动画
this.$refs.provider.openAnimation()
closeAnimation
params: -
paramsNote: 无
paramsType: undefined
关闭动画
this.$refs.provider.openAnimation()
amplification
params: px
paramsNote: 放大的像素
paramsType: number
同步放大所有组件
this.$refs.provider.amplification(10)//放大10像素
narrow
params: px
paramsNote: 缩小的像素
paramsType: number
同步缩小所有组件
this.$refs.provider.narrow(10)//缩小10像素
remove
params: -
paramsNote: 无参数
paramsType: undefined
销毁provider,销毁后 provider将无任何作用,用于重置
this.$refs.provider.remove()
sharkHiddenNodes
params: -
paramsNote: 无参数
paramsType: undefined
获取所有非隐藏的节点
this.$refs.provider.sharkHiddenNodes()
getAllData
params: -
paramsNote: 无参数
paramsType: undefined
获取所有节点包含隐藏的
this.$refs.provider.getAllData()
draw
params: data
paramsNote: 需要绘制的数据
paramsType: render[]
绘制
this.$refs.provider.draw(renderData)
updateComponent
params: (key, fn, tag)
paramsNote: (属性名,回调,tag)
paramsType: (Object.keys(render).filter(i=>i!=='renderData'),fn,tag)
仅更新组件除了renderData的所有属性,返回值更新到对应组件的属性值
props:{
thisData:{} //所有组件都会被注入的本组件信息
}
this.$refs.provider.updateComponent('v',(i)=>{
if(i.id===this.thisData.id){
return ...
...
}},this.thisData.tag)
updateData
params: (fn, tag)
paramsNote: (回调,tag)
paramsType: (fn,tag)
仅更新renderData属性,返回值更新到对应组件的renderData
props:{
thisData:{} //所有组件都会被注入的本组件信息
}
this.$refs.provider.updateData((i)=>{
if(i.id===this.thisData.id){
return {...}
...
}},this.thisData.tag)
undo
params: -
paramsNote: 无参数
paramsType: undefined
回退,注意,在辅助线开启期间无法使用本功能(todo)
this.$refs.provider.undo()
openAider
params: -
paramsNote: 无参数
paramsType: undefined
开启辅助线,此时在组件与被移动组件接近时会自动吸附
this.$refs.provider.openAider()
closeAider
params: -
paramsNote: 无参数
paramsType: undefined
关闭辅助线,
this.$refs.provider.closeAider()
on
- 它所有容器内触发事件的回调,下文见on详细介绍
params:
(event, callback)
paramsNote:(事件名,回调)
paramsType:(string,fn)
callbackParams:用的时候打印下吧
触发事件
const _event={
//弹窗点击
_MIC: 'menuItemClick',
//弹窗鼠标抬起,与menuItemClick区别为menuItemClick会接受弹窗组件的发出值,而menuUp不会
_MEU: 'menuUp',
//鼠标放起
_MU: 'mouseUp',
//连线点击
_LC: 'lineClick',
//组件点击
_CL: 'componentClick',
//组件拖动中
_DI: 'dragging',
//组件拖动结束
_DS: 'dragStop',
//组件缩放中
_RI: 'resizing',
//面板点击
_AC: 'areaClick',
//组件缩放结束
_RS: 'resizeStop',
//组件鼠标悬浮
_HO: 'hover',
//鼠标离开组件上
_LE: 'leave'
}
//event 是_event 的对应的value,注意下
this.$refs.provider.on('hover',(args)=>{
console.log(args,'hover');
})
getAllLines
params: -
paramsNote: 无参数
paramsType: undefined
获取所有线
this.$refs.provider.getAllLines()
props of component
- 包含 putComponent/modalComponent
<template>
<ul>
<li @click="onConnect">
<a>onConnect</a>
</li>
<li @click="disConnect">
<a>disConnect</a>
</li>
<li @click="clearConnectSelf">
<a>clearConnect</a>
</li>
<li @click="closeOverSelf">
<a>closeOver</a>
</li>
<li @click="del">
<a>del</a>
</li>
<li @click="menuItemClickSelf">
<a>上传一个对象</a>
</li>
</ul>
</template>
<script>
export default {
name: "view-c",
props: {
clearConnect: {
type: Function,
default: new Function('')
},
updateData: {
type: Function,
default: new Function('')
},
closeConnect: {
type: Function,
default: new Function('')
},
//menuItemClick仅modalComponent具备
menuItemClick: {
type: Function,
default: new Function('')
},
closeOver: {
type: Function,
default: new Function('')
},
connect: {
type: Function,
default: new Function('')
},
change: {
type: Function,
default: new Function('')
},
thisData: {
type: Object,
default: () => {
return {};
},
},
},
data: () => {
return {
ns: {},
};
},
watch: {
thisData: {
handler(n) {
console.log(n, 'nnn')
}, deep: true,
immediate: true
}
// node: {
// handler(n) {
// this.ns = n;
// console.log(n, "view");
// setTimeout(() => {
// this.$emit('finished',n.instance.tag)
// }, 2000);
// },
// immediate:true,
// deep:true
// },
},
mounted() {
},
methods: {
//发出值,会被on的event为"menuItemClick"的回调接受为其参数
menuItemClickSelf(){
this.menuItemClick({
a:1
})
},
//隐藏该节点
del() {
this.change('v', (i) => {
console.log(213)
if (i.id === this.thisData.id) {
return {
...i,
v: false
}
} else {
return i
}
}, this.thisData.tag)
},
//关闭点击删除线状态
closeOverSelf(e) {
this.closeOver(e)
},
//开启点击删除线
disConnect(e) {
this.closeConnect(e)
},
//删除全部连线
clearConnectSelf() {
this.clearConnect()
},
//开启连线
onConnect(e) {
//开启连线
console.log(e, 'e')
this.connect(e)
},
log1() {
console.log(this.updateData, 'updateView')
this.updateData((i) => {
console.log('123')
if (i.id === this.thisData.id) {
return {
text: 1
}
}
}, this.thisData.tag)
console.log(1)
}
}
};
</script>
<style scoped>
</style>
server
git clone https://github.com/qianzhuoyao/ADrag.git
npm i
# serve with hot reload at localhost:8081
npm run serve
# distribution build
npm run build
License
[MIT license]