web架构师编辑器内容-改进字体下拉菜单

前面说到我们可以通过面板配置来更新画布上面的一些属性,如果我们有这样一个需求:在右侧面板配置里面需要查看字体的样式效果我们应该怎么做呢?
我们一开始字体的渲染:

const fontFamilyArr = [{value: '"SimSun","STSong',text: '宋体'},{value: '"SimHei","STHeiti',text: '黑体'},{value: '"KaiTi","STKaiti',text: '楷体'},{value: '"FangSong","STFangsong',text: '仿宋'}
]
fontFamily: {component: 'a-select',subComponent: 'a-select-option',text: '字体',options: [{value: '',text: '无'},...fontFamilyArr],afterTransform: (e: any) => e
},

后面改成:

const fontFamilyOptions = fontFamilyArr.map((font) => {return {value: font.value,// 第一种写法生成vnodetext: h('span', { style: { fontFamily: font.value } }, font.text)// 使用:tsx写法,需要把文件后缀名改成tsxtext: <span style={{ fontFamily: font.value}}>{font.text }</span> as VNode}
})
options: [{value: '',text: '无'},...fontFamilyOptions
],

渲染的时候有两种方案:方案一使用tsx进行渲染,方案二:借助render函数桥梁,将vnode转换成真实dom

方案一:使用jsx重写组件sfc写法 Single File Component写法,jsx文件天生就是转换vnode

jsx动态组件名称

在jsx中对于动态组件名称,我们必须要拿到其实例,然后把一个变量赋值给组件实例

import { Button } from 'button'const Name = Button
<Name />
展开属性
<Component {...props} />
事件写法
v-on:click => onClick

第一种使用tsx渲染:将PropTable.vue文件改成PropTable.tsx文件,返回的是dom,

import { Input, InputNumber, Slider, Radio, Select} from 'ant-design-vue'
// jsx对于动态组件,我们必须要拿到其实例,再把一个变量赋值给组件实例,所以我们要解构出组件实例。
const mapToComponent = {'a-input': Input,'a-textarea': Input.TextArea,'a-input-number': InputNumber,'a-slider': Slider,'a-radio-group': Radio,'a-radio-button': Radio.Button,'a-select': Select,'a-select-option': Select.Option
} as any
return () => (<div class="props-table">{Object.keys(finalProps.value).map(key => {const value = finalProps.value[key]const ComponentName = mapToComponent[value.component]const SubComponent = value.subComponent ? mapToComponent[value.subComponent] : nullconst props = { [value.valueProp]: value.value,...value.extraProps,...value.events}return (<div key={key} class="prop-item">{ value.text && <span class="label">{value.text}</span>}<div class="prop-component">{/* 渲染动态组件名 */}<ComponentName {...props}>{value.options && value.options.map(option => {return (<SubComponent value={option.value}>{option.text}</SubComponent>)})}</ComponentName></div></div>)})}
</div>)

finalProps:
在这里插入图片描述

方案二:使用render函数实现桥梁

// RenderVnode.ts
import { defineComponent } from 'vue'const RenderVnode = defineComponent({props: {vNode: {type: [Object, String],required: true}},render() {return this.vNode;}
})export default RenderVnode

在propsTable中使用

<template v-if="value.options"><component:is="value.subComponent"v-for="(option, k) in value.options":key="key":value="value.value"><!-- {{ option.text }} --><render-vnode :vNode="option.text"></render-vnode></component>
</template>

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

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

相关文章

Android画布Canvas裁剪clipRect,Kotlin

Android画布Canvas裁剪clipRect&#xff0c;Kotlin private fun mydraw() {val originBmp BitmapFactory.decodeResource(resources, R.mipmap.pic).copy(Bitmap.Config.ARGB_8888, true)val newBmp Bitmap.createBitmap(originBmp.width, originBmp.height, Bitmap.Config.A…

插入排序之C++实现

描述 插入排序是一种简单直观的排序算法。它的基本思想是将一个待排序的数据序列分为已排序和未排序两部分&#xff0c;每次从未排序序列中取出一个元素&#xff0c;然后将它插入到已排序序列的适当位置&#xff0c;直到所有元素都插入完毕&#xff0c;即完成排序。 实现思路…

为什么有的开关电源需要加自举电容?

一、什么是自举电路&#xff1f; 1.1 自举的概念 首先&#xff0c;自举电路也叫升压电路&#xff0c;是利用自举升压二极管&#xff0c;自举升压电容等电子元件&#xff0c;使电容放电电压和电源电压叠加&#xff0c;从而使电压升高。有的电路升高的电压能达到数倍电源电压。…

相机内参标定理论篇------张正友标定法

一、为什么做相机标定&#xff1f; 标定是为了得到相机坐标系下的点和图像像素点的映射关系&#xff0c;为摄影几何、计算机视觉等应用做准备。 二、为什么需要张正友标定法&#xff1f; 张正友标定法使手工标定相机成为可能&#xff0c;使相机标定不再需要精密的设备帮助。…

DockerFile常用保留字指令及知识点合集

目录 DockerFile加深理解&#xff1a; DockerFile常用保留字指令 保留字&#xff1a; RUN&#xff1a;容器构建时需要运行的命令 COPY&#xff1a;类似ADD&#xff0c;拷贝文件和目录到镜像中。 将从构建上下文目录中 <源路径> 的文件/目录复制到新的一层的镜像内的 …

docker部署mysql主主备份 haproxy代理(swarm)

docker部署mysql主主备份 haproxy代理&#xff08;swarm&#xff09; docker部署mysql主主备份 docker部署mysql主主备份&#xff08;keepalived&#xff09;跨主机自动切换 docker部署mysql主主备份 haproxy代理&#xff08;swarm&#xff09; 1. 环境准备 主机IPnode119…

【错误记录/js】保存octet-stream为文件后数据错乱

目录 说在前面场景解决方式其他 说在前面 后端&#xff1a;go、gin浏览器&#xff1a;Microsoft Edge 120.0.2210.77 (正式版本) (64 位) 场景 前端通过点击按钮来下载一些文件&#xff0c;但是文件内容是一些非文件形式存储的二进制数据。 后端代码 r : gin.Default()r.Stat…

数学建模之聚类模型详解

聚类模型 引言 “物以类聚&#xff0c;人以群分”&#xff0c;所谓的聚类&#xff0c;就是将样本划分为由类似的对象组成的多个类的过程。聚类后&#xff0c;我们可以更加准确的在每个类中单独使用统计模型进行估计、分析或预测&#xff1b;也可以探究不同类之间的相关性和主…

Flink 客户端操作命令及可视化工具

Flink提供了丰富的客户端操作来提交任务和与任务进行交互。下面主要从Flink命令行、Scala Shell、SQL Client、Restful API和 Web五个方面进行整理。 在Flink安装目录的bin目录下可以看到flink&#xff0c;start-scala-shell.sh和sql-client.sh等文件&#xff0c;这些都是客户…

Tomcat日志乱码了怎么处理?

【前言】 tomacat日志有三个地方&#xff0c;分别是Output(控制台)、Tomcat Localhost Log(tomcat本地日志)、Tomcat Catalina Log。 启动日志和大部分报错日志、普通日志都在output打印;有些错误日志&#xff0c;在Tomcat Localhost Log。 三个日志显示区&#xff0c;都可能…

ARM学习(24)Can的高阶认识和错误处理

笔者来聊一下CAN协议帧的认识和错误处理。 1、CAN协议帧认识 CAN 差分信号&#xff0c;是经过CAN收发器转成差分信号的&#xff0c;CAN RX和TX是逻辑电平。CAN的基础知识&#xff0c;可参考笔者这边文章&#xff1a;ARM学习&#xff08;21&#xff09;STM32 外设Can的认识与驱…

Linux之用户/组 管理

关机&重启命令 shutdown -h now立刻进行关机shutdown -h 11分钟后关机&#xff08;shutdown默认等于shutdown -h 1) -h即halt shutdown -r now现在重新启动计算机 -r即reboot halt关机reboot重新启动计算机sync把内存数据同步到磁盘 再进行shutdown/reboot/halt命令在执行…

深度学习(八):bert理解之transformer

1.主要结构 transformer 是一种深度学习模型&#xff0c;主要用于处理序列数据&#xff0c;如自然语言处理任务。它在 2017 年由 Vaswani 等人在论文 “Attention is All You Need” 中提出。 Transformer 的主要特点是它完全放弃了传统的循环神经网络&#xff08;RNN&#x…

【面向对象】对比JavaScript、Go、Ada、Python、C++、Java、PHP的访问限制。

在不同编程语言中&#xff0c;控制成员&#xff08;变量、方法、类等&#xff09;可见性的机制不尽相同。以下是对比JavaScript、Go、Ada、Python、C、Java、PHP所使用的访问限制关键字和约定&#xff1a; 一、JavaScript ### JavaScript访问限制 早期的JavaScript并没有类似…

Hago 的 Spark on ACK 实践

作者&#xff1a;华相 Hago 于 2018 年 4 月上线&#xff0c;是欢聚集团旗下的一款多人互动社交明星产品。Hago 融合优质的匹配能力和多样化的垂类场景&#xff0c;提供互动游戏、多人语音、视频直播、 3D 虚拟形象互动等多种社交玩法&#xff0c;致力于为用户打造高效、多样、…

Centos安装vsftpd:centos配置vsftpd,ftp报200和227错误

一、centos下载安装vsftpd&#xff08;root权限&#xff09; 1、下载安装 yum -y install vsftpd 2、vsftpd的配置文件 /etc/vsftpd.conf 3、备份原来的配置文件 sudo cp /etc/vsftpd.conf /etc/vsftpd.conf.backup 4、修改配置文件如下&#xff1a;vi /etc/vsftpd.conf …

收银管理系统怎样帮助商家很好地经营服装门店

收银管理系统对于服装门店的经营可以提供多方面的帮助&#xff0c;以下是一些具体的优势和功能&#xff1a; 1. 快速准确的收银&#xff1a;收银管理系统可以实现快速、准确的收银操作&#xff0c;通过条码扫描或手动输入商品信息&#xff0c;自动计算价格并生成收据。这样可以…

差生文具多之(二): perf

栈回溯和符号解析是使用 perf 的两大阻力&#xff0c;本文以应用程序 fio 的观测为例子&#xff0c;提供一些处理它们的经验法则&#xff0c;希望帮助大家无痛使用 perf。 前言 系统级性能优化通常包括两个阶段&#xff1a;性能剖析和代码优化&#xff1a; 性能剖析的目标是寻…

如何开发专属花店展示平台小程序?

如今&#xff0c;微信小程序已经成为了花店行业拓展客户资源的重要工具。通过开发一个专属花店小程序&#xff0c;你可以为自己的花店带来更多的曝光和客户资源。那么&#xff0c;如何开发一个专属花店小程序呢&#xff1f;接下来&#xff0c;我们将一步步为你详细讲解。 首先&…

STB0016导线防碰撞警示装置

适用场所&#xff1a; 适用于高压线,塔吊,路政,船舶,种植,塔机,航海航道等场所起警示作用。 产品特点&#xff1a; 光控无开关&#xff0c;白天不闪&#xff0c;昏暗环境自动闪烁&#xff0c;无需手动操作&#xff0c;省时省事; 采用红色LED作光源&#xff0c;亮度高&#…