1. 编辑器
思路:
用一个数组 compsData 维护编辑器中的组件数据。
把组件拖拽到画布中时，使用 push() 方法将新的组件数据添加到 compsData。
v-for 遍历 compsData，将每个组件逐个渲染到画布。
<component
v-for="item in compsData"
:key="item.id"
:is="item.component"
:style="item.style"
:propValue="item.propValue"
/>
{
component: 'v-text', // 组件名称
label: 'XX', // 左侧组件列表中组件名字
propValue: 'XX', // 组件所使用的值
animations: [], // 动画列表
events: {}, // 事件列表
style: { // 组件样式
width: 200,
height: 200,
fontSize: 14,
fontWeight: 500,
lineHeight: '',
letterSpacing: 0,
textAlign: '',
color: '',
},
}2. 拖拽
给DOM元素添加一个 draggable 属性。将组件列表中的组件拖拽到画布中，还有两个事件：
-
dragstart 事件，在拖拽刚开始时触发。它主要用于将拖拽的组件信息传递给画布。 -
drop 事件，在拖拽结束时触发。主要用于接收拖拽的组件信息。
组件在画布中移动
将画布设为相对定位 position: relative，然后将每个组件设为绝对定位 position: absolute。通过监听三个事件来进行移动：
-
mousedown 事件，在组件上按下鼠标时，记录组件当前的位置，即 xy 坐标（ xy 对应的是 css 中的 left 和 top。 -
mousemove 事件，每次鼠标移动时，都用当前最新的 xy 坐标减去最开始的 xy 坐标，从而计算出移动距离，再改变组件位置。 -
mouseup 事件，鼠标抬起时结束移动。
3. 删除组件、调整图层层级
画布中五个组件 abcde，那它们在画布数据中的顺序为 [a, b, c, d, e]，图层层级和索引一一对应，即它们的 z-index 属性值是 01234。改变图层层级，即是改变组件数据在 compsData 数组中的顺序。例如有 [a, b, c] 三个组件，它们的图层层级从低到高顺序为 abc（索引越大，层级越高）。
删除组件：compsData.splice(index, 1)。
4. 绑定动画
使用了 animate.css 动画库
export default [ { label: '进入', children: [ { label: '渐显', value: 'fadeIn' }, { label: '向右进入', value: 'fadeInLeft' }, { label: '向左进入', value: 'fadeInRight' }, { label: '向上进入', value: 'fadeInUp' }, { label: '向下进入', value: 'fadeInDown' }, { label: '向右长距进入', value: 'fadeInLeftBig' }, { label: '向左长距进入', value: 'fadeInRightBig' }, { label: '向上长距进入', value: 'fadeInUpBig' }, { label: '向下长距进入', value: 'fadeInDownBig' }, { label: '旋转进入', value: 'rotateIn' }, { label: '左顺时针旋转', value: 'rotateInDownLeft' }, { label: '右逆时针旋转', value: 'rotateInDownRight' }, { label: '左逆时针旋转', value: 'rotateInUpLeft' }, { label: '右逆时针旋转', value: 'rotateInUpRight' }, { label: '弹入', value: 'bounceIn' }, { label: '向右弹入', value: 'bounceInLeft' }, { label: '向左弹入', value: 'bounceInRight' }, { label: '向上弹入', value: 'bounceInUp' }, { label: '向下弹入', value: 'bounceInDown' }, { label: '光速从右进入', value: 'lightSpeedInRight' }, { label: '光速从左进入', value: 'lightSpeedInLeft' }, { label: '光速从右退出', value: 'lightSpeedOutRight' }, { label: '光速从左退出', value: 'lightSpeedOutLeft' }, { label: 'Y轴旋转', value: 'flip' }, { label: '中心X轴旋转', value: 'flipInX' }, { label: '中心Y轴旋转', value: 'flipInY' }, { label: '左长半径旋转', value: 'rollIn' }, { label: '由小变大进入', value: 'zoomIn' }, { label: '左变大进入', value: 'zoomInLeft' }, { label: '右变大进入', value: 'zoomInRight' }, { label: '向上变大进入', value: 'zoomInUp' }, { label: '向下变大进入', value: 'zoomInDown' }, { label: '向右滑动展开', value: 'slideInLeft' }, { label: '向左滑动展开', value: 'slideInRight' }, { label: '向上滑动展开', value: 'slideInUp' }, { label: '向下滑动展开', value: 'slideInDown' }, ],
},
{
label: '强调',
children: [
{ label: '弹跳', value: 'bounce' },
{ label: '闪烁', value: 'flash' },
{ label: '放大缩小', value: 'pulse' },
{ label: '放大缩小弹簧', value: 'rubberBand' },
{ label: '左右晃动', value: 'headShake' },
{ label: '左右扇形摇摆', value: 'swing' },
{ label: '放大晃动缩小', value: 'tada' },
{ label: '扇形摇摆', value: 'wobble' },
{ label: '左右上下晃动', value: 'jello' },
{ label: 'Y轴旋转', value: 'flip' },
],
},
{
label: '退出',
children: [
{ label: '渐隐', value: 'fadeOut' },
{ label: '向左退出', value: 'fadeOutLeft' },
{ label: '向右退出', value: 'fadeOutRight' },
{ label: '向上退出', value: 'fadeOutUp' },
{ label: '向下退出', value: 'fadeOutDown' },
{ label: '向左长距退出', value: 'fadeOutLeftBig' },
{ label: '向右长距退出', value: 'fadeOutRightBig' },
{ label: '向上长距退出', value: 'fadeOutUpBig' },
{ label: '向下长距退出', value: 'fadeOutDownBig' },
{ label: '旋转退出', value: 'rotateOut' },
{ label: '左顺时针旋转', value: 'rotateOutDownLeft' },
{ label: '右逆时针旋转', value: 'rotateOutDownRight' },
{ label: '左逆时针旋转', value: 'rotateOutUpLeft' },
{ label: '右逆时针旋转', value: 'rotateOutUpRight' },
{ label: '弹出', value: 'bounceOut' },
{ label: '向左弹出', value: 'bounceOutLeft' },
{ label: '向右弹出', value: 'bounceOutRight' },
{ label: '向上弹出', value: 'bounceOutUp' },
{ label: '向下弹出', value: 'bounceOutDown' },
{ label: '中心X轴旋转', value: 'flipOutX' },
{ label: '中心Y轴旋转', value: 'flipOutY' },
{ label: '左长半径旋转', value: 'rollOut' },
{ label: '由小变大退出', value: 'zoomOut' },
{ label: '左变大退出', value: 'zoomOutLeft' },
{ label: '右变大退出', value: 'zoomOutRight' },
{ label: '向上变大退出', value: 'zoomOutUp' },
{ label: '向下变大退出', value: 'zoomOutDown' },
{ label: '向左滑动收起', value: 'slideOutLeft' },
{ label: '向右滑动收起', value: 'slideOutRight' },
{ label: '向上滑动收起', value: 'slideOutUp' },
{ label: '向下滑动收起', value: 'slideOutDown' },
],
},
]
标签：yyds,难点,value,label,画布,退出,干货,组件,旋转
From： https://blog.51cto.com/u_11365839/6104059