基础搭建 画布组件 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}|

$refs.sketch 数据

| key | 解释 | | ---- | ---- | | sketchupData | 获取画布内数组数据| | selected |画布选中项|

$refs.sketch.$bind 方法

| key | 解释 | 参数| | ---- | ---- | ---- | | selected |画布选中项| []| | addend |每次添加后返回添加id合集| [ids]|