低代码4之实现json导入导出

目录

• 低代码4之实现json导入导出
• • src / package / editor.jsx
  • src / package / useCommand.jsx
  • src / component / Dailog.jsx

低代码4之实现json导入导出

• 功能

• 导入与导出
  • 1：editor.jsx 文件 在 buttons添加导出导入按钮
  • 2：useCommand.jsx 文件之中 添加更新updateContainer的命令（ 这个命令需要加入消息队列之中，并且从外面commands.updateContainer传递的参数，更新最新的值 ） …args
  • 3： component / Dailog.jsx 实现弹窗组件

src / package / editor.jsx

import {
    computed, defineComponent, inject, ref } from "vue";
import "./editor.scss";
import EditorBlock from "./editor-block";
import deepcopy from "deepcopy";
import {
    useMenuDragger } from "./useMenuDragger";
import {
    useFocus } from "./useFocus";
import {
    useBlockDragger } from "./useBlockDragger";
import {
    useCommand } from "./useCommand";
import {
    $dialog } from "@/components/Dailog";
export default defineComponent({
   
  props: {
   
    modelValue: {
   
      type: Object,
    },
  },
  emits: ["update:modelValue"], // 1：菜单拖拽功能-03：触发事件 更新app的数据 set之中更新
  setup(props, ctx) {
   
    // console.log('props',props.modelValue);
    const data = computed({
   
      get() {
   
        return props.modelValue;
      },
      set(newValue) {
   
        ctx.emit("update:modelValue", deepcopy(newValue));
      },
    });
    const contentStyle = computed(() => ({
   
      width: data.value.container.width   "px",
      height: data.value.container.height   "px",
    }));
    const config = inject("config");

    //  1：菜单拖拽功能-02：实现h5的拖拽放入组件容器形成被拖拽的组件 useMenuDragger实现左侧菜单拖拽功能
    const containerRef = ref(null);
    const {
    dragstart, dragend } = useMenuDragger(containerRef, data);
    // 2：容器内获取焦点功能-01：点击容器时候聚焦与按住shift时候支持多个聚焦；选中后拖拽
    const {
    blockMousedown, containerMousedown, focusData,lastSelectBlock } = useFocus(
      data,
      (e) => {
   
        // 3：获取焦点后 进行拖拽-02
        mousedown(e, focusData);
      }
    );
    // 3：实现组件拖拽-01：
    const {
    mousedown,markLine } = useBlockDragger(focusData,lastSelectBlock,data);

    // 4：每一次操作的记录 撤销与重做功能
    const {
   commands} = useCommand(data)
    const buttons = [
      {
   lable:'撤销',icon:'',handler:()=>commands.undo()},
      {
   lable:'重做',icon:'',handler:()=>commands.redo()},
      {
   lable:'导出',icon:'',handler:()=>{
   
        $dialog({
   
          title:'导出json使用',
          content: JSON.stringify(data.value)
        })
      }},
      {
   lable:'导入',icon:'',handler:()=>{
   
        $dialog({
   
          title:'导入json使用'