web架构师编辑器内容-编辑器组件图层面板功能开发-锁定隐藏、键盘事件功能的开发

我们这一部分主要是对最右侧图层面板功能进行剖析,完成对应的功能的开发:
在这里插入图片描述
每个图层都对应编辑器上面的元素,有多少个元素就对应多少个图层,主要的功能如下:

  1. 锁定功能:点击锁定,在编辑器中没法编辑对应的组件属性,再次点击是取消锁定,恢复到可编辑的模式
  2. 可见化:点击隐藏,在编辑器中消失,再次点击,进行展示
  3. 最外层图层也是可以进行点击,单击图层就是选中的效果。在编辑器上就是自动选中的效果。
  4. 图层的文字也可以进行修改,单击图层的文字,会切换到编辑模式,展示成input输入框,可以进行文字的修改。回车确认,点击esc退出,点击外部区域确定。
  5. 比较复杂的功能:拖动排序,按住这个按钮拖动以后,可以改变图层的顺序。

图层属性需求分析

图层锁定和隐藏/显示以及选中

图层和编辑器中的元素都是一一对应的,

// editor.ts
export interface EditorProps {// 供中间编辑器渲染的数组components: ComponentData[];// 当前编辑的是哪个元素,uuidcurrentElement: string
}export interface ComponentData {// 这个元素的 属性,属性请详见下面props: Partial<AllComponentProps>;// id,uuid v4 生成id: string;// 业务组件库名称 l-text,l-image 等等name: 'l-text' | 'l-image' | 'l-shape';
}

在editor.ts中,components其实就是对应的图层,有对应的一些属性ComponentData,对于不同的状态,我们来添加对应的标识符来添加特定的标识符来表示他的状态即可。

  • 在editor.ts的store中的components添加更多的标识符

{

isLocked: boolean;
isHidden: boolean;
}

  • 点击按钮切换为不同的值,使用这个值在页面上做判断
  • 点击选中,设置 currentElement的值

图层名称编辑

  • 添加更多属性 - layerName
  • 点击图层名称的时候,在input和普通标签之间切换
  • 添加按钮响应 - 对于 esc 和 enter 键的响应
    • 可能抽象一个通用的 hooks函数 - useKeyPress,可以处理与键盘相关的事件
  • 点击到input外部区域的响应
    • 可能抽象一个通用的 hooks函数 - useClickOutside

拖动改变顺序

  • 最有难度的一个需求,涉及到一个较复杂的交互
  • 最终目的其实就是改变store中components数组的顺序

代码实现

// LayerList.vue
<ul :list="list" class="ant-list-items ant-list-border"><li class="ant-list-item" v-for="item in list" :key="item.id"><a-tooltip :title="item.isHidden ? '显示' : '隐藏'"><a-button shape="circle"><template v-slot:icon v-if="item.isHidden"><EyeInvisibleOutlined /></template><template v-slot:icon v-else><EyeOutlined /> </template></a-button></a-tooltip><a-tooltip :title="item.isLocked ? '解锁' : '锁定'"><a-button shape="circle"><template v-slot:icon v-if="item.isLocked"><LockOutlined /></template><template v-slot:icon v-else><UnlockOutlined /> </template></a-button></a-tooltip><span>{{ item.layerName }}</span></li>
</ul>// list的数据来源:在点击左侧组件模板库的时候,会在store中发射一个事件:
// Editor.vue
// 右侧图层设置组件(其中components就是store中的components)
//  const components = computed(() => store.state.editor.components);
<layer-list:list="components":selectedId="currentElement && currentElement.id"@change="handleChange"@select="setActive">
</layer-list>
// 点击左侧模板库某个组件触发的事件
const addItem = (component: any) => {store.commit('addComponent', component);
};
// editor.ts
addComponent: setDirtyWrapper((state, component: ComponentData) => {component.layerName = '图层' + (state.components.length + 1);state.components.push(component);}),// 比如点击大标题,在addItem中对应的参数如下:component: {// 通过pageUUid生成的唯一主键id: '3c78b476-7a8d-4ad1-b944-9b163993595d',// 动态需要渲染的组件name: "l-text",props: {actionType: "";backgroundColor: "";borderColor: "#000";borderRadius: "0";borderStyle: "none";borderWidth: "0";boxShadow: "0 0 0 #000000";color: "#000000";fontFamily: "";fontSize: "30px";fontStyle: "normal";fontWeight: "bold";height: "";left: "0";lineHeight: "1";opacity: "1";paddingBottom: "0px";paddingLeft: "0px";paddingRight: "0px";paddingTop: "0px";position: "absolute";right: "0";tag: "h2";text: "大标题";textAlign: "left";textDecoration: "none";top: "0";url: "";width: "100px";}

最开始的样子
在这里插入图片描述
进行锁定隐藏操作

// 隐藏
<a-tooltip :title="item.isHidden ? '显示' : '隐藏'"><a-buttonshape="circle"@click.stop="handleChange(item.id, 'isHidden', !item.isHidden)"><template v-slot:icon v-if="item.isHidden"><EyeInvisibleOutlined /></template><template v-slot:icon v-else><EyeOutlined /> </template></a-button>
</a-tooltip>
// 锁定
<a-tooltip :title="item.isLocked ? '解锁' : '锁定'"><a-buttonshape="circle"@click.stop="handleChange(item.id, 'isLocked', !item.isLocked)"><template v-slot:icon v-if="item.isLocked"><LockOutlined /></template><template v-slot:icon v-else><UnlockOutlined /> </template></a-button>
</a-tooltip>const handleChange = (id: string, key: string, value: boolean) => {const data = {id,key,value,isRoot: true,};context.emit("change", data);
};// 最终在子组件中emit chang事件,父组件中触发该方法,
const handleChange = (e: any) => {console.log('event', e);store.commit('updateComponent', e);
};// 对store中的updateComponent进行稍微的改造
// 原来的updateComponent
// 这个主要针对于最右侧面板设置区域中的属性设置进行更新的,改变的是props的值。
updateComponent(state, { key, value }) {const updatedComponent = state.components.find((component) => component.id === state.currentElement); if(updatedComponent) {updatedComponent.props[key as keyof TextComponentProps] = value;}
}
// 现在的
updateComponent(state, { key, value, id, isRoot }) {const updatedComponent = state.components.find((component) => component.id === (id || state.currentElement)); if(updatedComponent) {if(isRoot) {(updatedComponent as any)[key as string] = value;}updatedComponent.props[key as keyof TextComponentProps] = value;}
}
// 增加isRoot主要用来判断改变的是否是props中的某一项的值,我们进行的是展示隐藏,锁定不锁定的功能,所以直接改变key值就行:
export interface ComponentData {// 这个元素的 属性,属性请详见下面props: Partial<AllComponentProps>;// id,uuid v4 生成id: string;// 业务组件库名称 l-text,l-image 等等name: 'l-text' | 'l-image' | 'l-shape';// 图层是否隐藏isHidden?: boolean;// 图层是否锁定isLocked?: boolean;// 图层名称layerName?: string;
}// Editor.vue
// 根据isLocked来判断右侧面板设置区域属性设置是否可以进行编辑
<a-tab-pane key="component" tab="属性设置" class="no-top-radius"><div v-if="currentElement"><edit-groupv-if="!currentElement.isLocked":props="currentElement.props"@change="handleChange"></edit-group><div v-else><a-empty><template #description>该元素已被锁定,无法被编辑</template></a-empty></div></div><pre>{{ currentElement && currentElement.props }}</pre>
</a-tab-pane>// 根据hidden属性来控制中间画布区域是否可以进行显示与隐藏
// EditorWrapper.vue
:class="{ active: active, hidden: hidden }"

图层重命名组件的开发

图层重命名组件,就是在右侧面板设置中的图层设置区域,点击图层名称,变成可输入的输入框形式,可以完成图层名称的更新,并且可以添加一些键盘事件,点击回车可以显示新的值,点击esc后显示刚开始的旧的值。在点击input区域外侧恢复文本区域,并且显示新的值。基于这些,我们可以抽离出一个InlineEdit组件

InlineEdit
显示默认文本区域,点击以后显示为 Input
Input 中的值显示为文本中的值
更新值以后,键盘事件 - (useKeyPress)

  • 点击回车以后恢复文本区域,并且显示新的值
  • 点击 ESC 后恢复文本区域,并且显示刚开始的旧的值,更新值以后,点击事件 - (useClickOutside)
  • 点击 Input 区域外侧恢复文本区域,并且显示新的值

简单验证

  • 当 Input值为空的时候,不恢复,并且显示错误。

最初的InlineEdit组件

// InlineEdit.vue
<template><div class="inline-edit" @click.stop="handleClick" ref="wrapper"><inputv-model="innerValue"v-if="isEditing"placeholder="文本不能为空"ref="inputRef"/><slot v-else :text="innerValue"><span>{{innerValue}}</span></slot></div>
</template><script lang="ts">
import { defineComponent, nextTick, ref, watch } from 'vue'
export default defineComponent({name: 'inline-edit',props: {value: {type: String,required: true}},emits: ['change'],setup (props, context) {const innerValue = ref(props.value)const isEditing = ref(false)const handleClick = () => {isEditing.value = true}return {handleClick,innerValue,isEditing}}
})
</script><style>
.inline-edit {cursor: pointer;
}
.ant-input.input-error {border: 1px solid #f5222d;
}
.ant-input.input-error:focus {border-color:  #f5222d;
}
.ant-input.input-error::placeholder {color: #f5222d;
}
</style>
键盘事件整合成hooks函数:
// hooks/useKeyPress.ts
import { onMounted, onUnmounted } from 'vue'
const useKeyPress = (key: string, cb: () => any) => {const trigger = (event: KeyboardEvent) => {if (event.key === key) {cb()}}onMounted(() => {document.addEventListener('keydown', trigger)})onUnmounted(() => {document.removeEventListener('keydown', trigger)})
}
// 组件中使用 InlineEdit.vue
// 缓存之前编辑的值
watch(isEditing, (isEditing) => {if (isEditing) {cachedOldValue = innerValue.value}
})
useKeyPress("Enter", () => {if (isEditing.value) {isEditing.value = false;context.emit("change", innerValue.value);}
});
useKeyPress("Escape", () => {if (isEditing.value) {isEditing.value = false;innerValue.value = cachedOldValue;}
});// 父组件接受change事件
<inline-editclass="edit-area":value="item.layerName"@change="(value) => {handleChange(item.id, 'layerName', value)}"
></inline-edit>

键盘响应的功能常规做法其实就是向document.addEventListener上添加各种一系列的回调,在项目后期还会遇到各种复杂的键盘响应,比如组合键,ctrl+c,ctrl+v,我们可能会进化到第三方库来完成对应的需求,先使用实际代码演示一个比较简单的功能,然后再使用第三方库的解决方案,这样能让我们了解第三方库的基本原理。上面就是按键响应的基本原理。
后来增加一个需求:在点击编辑,变成输入框的时候,增加自动聚焦的功能:

//这样写有问题
watch(isEditing, isEditing => {if (isEditing) {cachedOldValue = innerValue.valueif (inputRef.value) {inputRef.value.focus()}}
})

这样写的话,发现不起任何作用,input没有自动聚焦。
watchEffect
在vue3的官网api中,我们可以看到:
在这里插入图片描述
watchEffect的flush默认是pre,默认是在dom生成之前执行的,所以拿不到dom。但是vue没有提供可以改变flush的选项,没有办法在post中执行。所以我们这里可以vue提供的nextTick,等待dom生成完毕后,再运行,改写后的:

watch(isEditing, async (isEditing) => {if (isEditing) {cachedOldValue = innerValue.valueawait nextTick()if (inputRef.value) {inputRef.value.focus()}}
})
外侧点击整合hooks函数
// hooks/useClickOutside.ts
import { ref, onMounted, onUnmounted, Ref } from 'vue';
const useClickOutside = (elementRef: Ref<null | HTMLElement>) => {const isClickOutside = ref(false)const handler = (e: MouseEvent) => {if (elementRef.value && e.target) {// 检查当前元素是否在目标元素范围内if (elementRef.value.contains(e.target as HTMLElement)) {isClickOutside.value = false} else {isClickOutside.value = true}}}onMounted(() => {document.addEventListener('click', handler)})onUnmounted(() => {document.removeEventListener('click', handler)})return isClickOutside
}// 组件中使用 InlineEdit.vue
const inputRef = ref<null | HTMLInputElement>(null)
const isOutside = useClickOutside(wrapper)
watch(isOutside, (newValue) => {if (newValue && isEditing.value) {isEditing.value = falsecontext.emit('change', innerValue.value)}// 这里不这样做会有点问题,后面会将。isOutside.value = false;
})

判断是否点击到了对应的dom节点的功能是比较常见的,比如说下拉菜单的关闭,点击下拉菜单的外面,会关闭下拉菜单使用的是同一个思想。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/411210.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CNN:Convolutional Neural Network(上)

目录 1 为什么使用 CNN 处理图像 2 CNN 的整体结构 2.1 Convolution 2.2 Colorful image 3 Convolution v.s. Fully Connected 4 Max Pooling 5 Flatten 6 CNN in Keras 原视频&#xff1a;李宏毅 2020&#xff1a;Convolutional Neural Network 1 为什么使用…

基于LabVIEW的压力传感器测试系统

摘要 现在各类压力传感器已广泛应用于各种工业自控环境&#xff0c;对压力传感器的研究 及应用&#xff0c;既可以体现一个国家的科技发展水平&#xff0c;又可以提升国家的综合国力&#xff0c;还 可以在丰富、方便和智能化人们的生活方面做出重要的贡献。而针对不同仪器组 成…

Docker篇之修改docker默认磁盘占用目录

一、前言 通常情况下&#xff0c;当我们默认安装docker服务时&#xff0c;在不指定默认存储路径时&#xff0c;docker会自动创建目录&#xff0c;经常会出现打满根目录的情况。 默认存储路径为&#xff1a;/var/lib/docker 下 可通过如下进行查询&#xff1a; docker info输出…

【目标检测】YOLOv5算法实现(九):模型预测

本系列文章记录本人硕士阶段YOLO系列目标检测算法自学及其代码实现的过程。其中算法具体实现借鉴于ultralytics YOLO源码Github&#xff0c;删减了源码中部分内容&#xff0c;满足个人科研需求。   本系列文章主要以YOLOv5为例完成算法的实现&#xff0c;后续修改、增加相关模…

安全牧场,保障优质奶源 追溯羊奶品质

安全牧场&#xff0c;保障优质奶源 追溯羊奶品质 近年来&#xff0c;人们对食品安全和健康越来越关注&#xff0c;而安全牧场的兴起正能够满足人们对优质奶源的需求。安全牧场以严格的品质监控和科学的管理&#xff0c;为消费者提供可追溯的高品质羊奶产品。本文小编羊大师将为…

蓝桥杯备赛 day 2 —— 二分算法(C/C++,零基础,配图)

目录 &#x1f308;前言&#xff1a; &#x1f4c1; 二分的概念 &#x1f4c1; 整数二分 &#x1f4c1; 二分的模板 &#x1f4c1; 习题 &#x1f4c1; 总结 &#x1f308;前言&#xff1a; 这篇文章主要是准备蓝桥杯竞赛同学所写&#xff0c;为你更好准备蓝桥杯比赛涉及…

Jmeter 测试脚本录制器-HTTP 代理服务器

Jmeter 测试脚本录制器-HTTP 代理服务器 Jmeter 配置代理服务器代理服务器获取请求地址示例图配置步骤 浏览器配置代理Google 浏览器插件配置代理windows 本地网络配置代理 启动录制&#xff0c;生成证书生成证书导入证书Jmeter 配置证书 浏览器点击页面&#xff0c;录制请求地…

【Dynamo学习笔记】Dynamo for Revit建模基础

目录 前言1 Revit模型的结构2 图元的操作2.1 图元的选择2.2 图元参数的读取和写入2.3 图元的创建2.3.2 创建轴网2.3.2 创建结构柱2.3.3 创建结构框架2.3.4 创建墙体 3 自定义节点 参考资料&#xff1a; &#xff08;1&#xff09; 罗嘉祥&#xff0c;宋姗&#xff0c;田宏钧. 《…

港科夜闻|香港科大团队研发多功能,可重构和抗破坏单线感测器阵列

关注并星标 每周阅读港科夜闻 建立新视野 开启新思维 1、香港科大团队研发多功能、可重构和抗破坏单线感测器阵列。研究人员开发出一种受人类听觉系统启发的感测器阵列设计技术。透过模仿人耳根据音位分布来区分声音的能力&#xff0c;这种新型感测器阵列方法可能优化感测器阵列…

水质净化厂物联网远程监控系统解决方案

水质净化厂物联网远程监控系统解决方案 随着科技的不断发展&#xff0c;物联网技术逐渐走进我们的生活。在水质净化厂中&#xff0c;物联网技术可以应用于远程监控系统&#xff0c;实现对水质净化过程的实时监测和数据分析&#xff0c;从而提高净化效率和管理水平。 一、需求分…

vue3-事件处理

事件监听 DOM 事件监听指令 v-on 简写 v-on:click"handler" 或者 click"handler"事件处理器 (handler) 的值可以是&#xff1a; 内联事件处理器&#xff1a;比如 click 方法事件处理器&#xff1a;一个指向组件上定义的方法的属性名或是路径。 在内联…

SpringBoot 2.x 正式停更了。Java 8 由 Solon 接收!

最近有好多个新闻说&#xff1a;SpringBoot 2.x 正式停更了&#xff0c;Java 8 怎么办&#xff1f;当然用 Solon 喽&#xff01; Solon&#xff0c;同时支持 jdk8, jdk11, jdk17, jdk21。也支持 graalvm native image。既支持 java8&#xff0c;也支持 java21 的&#xff1a; …