Pd-drag-base NPM

基础搭建画布组件 vue 2.6

安装

npm i -S pd-drag-base

yarn add -S pd-drag-base

引入

//main.js
import pdDragBase from 'pd-drag-base'
import 'pd-drag-base/dist/pdDragBase.css'
Vue.use(pdDragBase)
//自动注入全局组件

开发

<pdDragBase ref="sketch">
<!--自定义画布插槽-->
</pdDragBase>

容器组件

内置容器组件组件名 dragdropbox ,只有这个组件才能编组，和打散

数据格式

var itemtemplate = {
              "left": 148,//相对父级坐标
              "top": 63,//相对坐标
              "rotate": 0,//旋转角度
              "rotateable": false,//是否开启旋转
              "width": 31,//宽
              "height": 38,//高
              "active": false,//是否激活
              "childActiveAble": false,//子集能否激活，用于 内置组件dragdropbox
              "type": "dtext",//全局用户组件
              "children": [],//子集
              "id": "",//全局唯一id
              "parentId": ""//父级id 顶部根节点为null
}

attrs

key	解释	默认值
beforeCopy	event 拷贝前置函数	空
beforeDelete	event 删除确定函数	空
ruleConfig	props 规则配置	{scale: 1, /px 2 cm/ frameSelectType:'pointer',/框选规则/ hotKey:false, /是否开启快捷键/ stackLength:10 /压栈长度/}

ruleConfig

key	解释	默认值	可选值
scale	px转自定义单位比例	1
frameSelectType	框选规则	'fit'	'touch' 'fit'
stackLength	压栈长度(建议在20栈内)	30	Number

$refs.sketch提供以下api

key	解释	默认值	可选参数
select	选中指定id组件	{id}	{}
move	移动选中组件	{direction}	'up','right','down','left'
copy	复制选中组件	--	--
paste	粘贴中组件	--	--
undo	撤销	--	--
group	选中组件编组	--	--
breakGroup	打散编组(只打散内置组件`dragdropbox`)	--	--
deleteSelect	删除选中项	--	--
zIndex	指定id组件z轴调整	｛type,id｝	type可选参数：'bringForward','sendBackward','bringToFront','sendToBack'
cleanSelect	清空选择
initTree	初始化画布,根节点name值只会是sketchup	--	{data, snapShot = true}
updateItem	更新指定item	{id, data, snapShot = true}
addToSketch	添加到画布	{parent = null, item = [], snapShot = true}