- 安装依赖
- 功能:
- 撤销与重做
- 需要在useMenuDragger.js之中抛出事件
events.emit('start'); // 拖拽前与events.emit('end'); // 拖拽后
- 需要在useBlockDragger.js之中 标记一个拖拽的状态dragging=> 用于标记从后台渲染后的组件是否被拖拽的状态、并且在mousemove和mouseup之中抛出事件
-
useCommand.js 之中 处理撤销和重做功能
- mitt 为bus总线
src / package / useCommand.js
import {
events } from "./events"
export function useMenuDragger (containerRef,data){
let currentComponent = null
const dragstart = (e,component)=>{
containerRef.value.addEventListener('dragenter',dragenter)
containerRef.value.addEventListener('dragover',dragover)
containerRef.value.addEventListener('dragleave',dragleave)
containerRef.value.addEventListener('drop',drop)
currentComponent = component;
events.emit('start');
}
const dragend = (e)=>{
containerRef.value.removeEventListener('dragenter',dragenter)
containerRef.value.removeEventListener('dragover',dragover)
containerRef.value.removeEventListener('dragleave',dragleave)
containerRef.value.removeEventListener('drop',drop)
currentComponent = null;
events.emit('end');
}
const dragenter = (e)=>{
e.dataTransfer.dropEffect = 'move';
}
const dragover = (e)=>{
e.preventDefault();
}
const dragleave = (e)=>{
e.dataTransfer.dropEffect = 'none';
}
const drop = (e)=>{
let blocks = data.value.blocks;
data.value = {
...data.value,
blocks:[
...blocks,
{
top:e.offsetY, left:e.offsetX ,zIndex:1,
key:currentComponent.key,
alignCenter:true
}
]
}
currentComponent = null
}
return {
dragstart,
dragend
}
}
src / package / events.js
import mitt from "mitt";
export const events = mitt();
src / package / useCommand.js
import deepcopy from "deepcopy";
import {
onUnmounted } from "vue";
import {
events } from "./events";
export function useCommand(data) {
const state = {
current: -1,
queue: [],
commands: {
},
commandArray: [],
destoryArray: [],
};
const regeister = (command) => {
state.commandArray.push(command);
state.commands[command.name] = () => {
const {
redo, undo } = command.execute();
redo();
if (!command.pushQueue) {
return;
}
let {
queue, current }