低代码5之组件的层级(置顶展示)、选中删除、编辑与预览效果

低代码5之组件的层级(置顶展示)、选中删除、编辑与预览效果

  • 功能
  • 拖拽后的组件在内容区域内,展示这些组件的层级( 谁顶层谁底层 )
    • 需要添加按钮
    • 在useCommand.js之中 添加命令
      • 置顶 就是在未选中之中找到最大的zIndex值(maxZIndex),然后设置以选中的zIndex为 maxZIndex + 1
      • 置底 就是未选中找到最小的zIndex值(minZIndex),然后判断这个值是否小于0,则设置为minZIndex为0,其未选中的zIndex则为minZIndex的绝对值 + 原本的值,然后选中的则为minZIndex
  • 删除
    • 删除-撤销 就是拿到当前的data下的最新的blocks值
    • 删除-重做 就是拿focusData之中未被选中的值,因为以选中的被删除了
  • 编辑与预览
    • previewRef添加一个预览与编辑的flag,在useFocus.js之中去判断是否处于预览效果,若是为true则为预览效果则无法进行拖拽操作

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) {
   
    // 预览效果 内容不支持操作 可以点击 输入内容 方便查看效果
    const previewRef = ref(true) // 需要在获取焦点的时候 判断是否处于预览效果 useFocus.js
    // 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,clearBlockFocus } = useFocus(
      data,previewRef,
      (e) => {
   
        // 3:获取焦点后 进行拖拽-02
        mousedown(e, focusData);
      }
    );
    // 3:实现组件拖拽-01:
    const {
    mousedown,markLine } = useBlockDragger(focusData,lastSelectBlock,data);

    // 4:每一次操作的记录 撤销与重做功能
    const {
   commands} = useCommand(data,focusData)
    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使用',
          content:'',
          footer:true,
          onComfirm:(text)=>{
   
            // 需要在useCommand.js文件之中 调用消息队列 实现撤销重做等操作
            commands.updateContainer( JSON.parse(text) )
          }
        })
      }},
      {
   lable:'置顶',icon:'',handler:()=>commands.placeTop()},
      {
   lable:'置底',icon:'',handler:()=>commands.placeBottom()},
      {
   lable:'删除',icon:'',handler:()=>commands.delete()},
      {
   lable: ()=>previewRef.value ? '编辑' : '预览',icon:()=>previewRef.value ? '编辑icon' : '预览icon',
        handler:()=> {
    
          previewRef.value = !previewRef.value;
          clearBlockFocus()
        }
      },
    ]

    return () => (
      <div class="editor">
        <div class="editor-left">
          {
   /** 根据config的注册列表 渲染出左侧的物料区域、:1:菜单拖拽功能-01:实现h5的拖拽-draggable */}
          {
   config.componetsL
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个基于Vue2的多选层级组件的示例代码,你可以根据自己的需求进行修改: ```html <template> <div class="tree"> <div class="tree-item" v-for="(item, index) in treeData" :key="index"> <input type="checkbox" :id="'tree'+index" :checked="item.checked" @change="checkNode(item, $event)"> <label :for="'tree'+index">{{ item.label }}</label> <div class="tree-children" v-if="item.children && item.children.length > 0"> <tree :tree-data="item.children" :last-rank="lastRank(item)"></tree> </div> </div> </div> </template> <script> export default { name: 'tree', props: { treeData: { type: Array, default: () => [] }, lastRank: { type: Boolean, default: false } }, methods: { checkNode(node, event) { node.checked = event.target.checked if (node.children && node.children.length > 0) { node.children.forEach(child => { child.checked = event.target.checked }) } } } } </script> <style scoped> .tree { margin-left: 20px; } .tree-item { display: flex; align-items: center; } .tree-item input[type="checkbox"] { margin-right: 10px; } .tree-children { margin-left: 20px; } </style> ``` 在上述代码中,我们定义了一个名为`tree`的组件,该组件接收两个props:`treeData`和`lastRank`。其中,`treeData`是一个数组,用于表示树的数据结构;`lastRank`是一个布尔值,用于判断当前节点是否是最后一级节点。 在组件的模板中,我们使用了递归的方式来渲染整棵树。对于每个节点,我们都渲染了一个复选框和一个标签,并且根据是否有子节点来决定是否渲染子树。 在组件的方法中,我们定义了一个`checkNode`方法,用于处理节点的选中状态。当一个节点被选中时,我们需要将其所有子节点也选中;当一个节点被取消选中时,我们需要将其所有子节点也取消选中

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值