Vue3 SvgIcon组件开发

在前面自定义tree组件继续功能迭代前，我们先开发一个通用的ScgIcon组件，用于后续组件模板中小图标的展示。

引入iconfont

官网：https://www.iconfont.cn/

选取图标进行下载，只取iconfont.js文件

在这里插入图片描述

在prettier中忽略该文件：

在这里插入图片描述

放入iconfont.js文件：

在这里插入图片描述

开发SvgIcon组件

在这里插入图片描述

vitepress整合

增加菜单

在这里插入图片描述

全局引入和注册

在这里插入图片描述

编写markdown文档：

在这里插入图片描述

编写组件示例：

在这里插入图片描述

执行效果：

在这里插入图片描述

应用到Tree组件

在tree组件模板中应用<SvgIcon>组件。

在这里插入图片描述

将原先的+、-符号的按钮替换为自定义折叠展开图标：

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

Performance Metrics in Evaluating Stable Diffusion Models

Performance Metrics in Evaluating Stable Diffusion Models

1.Performance Metrics in Evaluating Stable Diffusion Models 笔记来源&#xff1a; 1.Performance Metrics in Evaluating Stable Diffusion Models 2.Denoising Diffusion Probabilistic Models 3.A simple explanation of the Inception Score 4.What is the inception s…
阅读更多...
【笔记：3D航路规划算法】一、RRT

【笔记：3D航路规划算法】一、RRT

目录 关键概念3D路径规划算法1. A*算法2. RRT1. 初始化&#xff1a;2. 实例化搜索算法&#xff1a;3. 路径生成&#xff1a;4. 绘制图像&#xff1a; 3D路径规划是在三维空间中寻找从起点到终点的最短或最优路径的一种技术。它广泛应用于无人机导航、机器人运动规划、虚拟现实等…
阅读更多...
【BUG】已解决：ValueError: All arrays must be of the same length

【BUG】已解决：ValueError: All arrays must be of the same length

ValueError: All arrays must be of the same length 目录 ValueError: All arrays must be of the same length 【常见模块错误】 【解决方案】 问题原因 解决方法 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&#xff0c;我是博主英杰&…
阅读更多...
SolidWorks 二次开发--创建属性页面及控件事件（二）

SolidWorks 二次开发--创建属性页面及控件事件（二）

在前文中我们学习了如何创建和显示属性页面&#xff0c;本章节将重点介绍如何向属性页面中添加控件。控件是属性页面的基本组成部分&#xff0c;可以是文本框、按钮、复选框等&#xff0c;用于用户交互和数据展示。接下来我们将看到如何定义、配置和操作这些控件&#xff0c;让…
阅读更多...
边缘设备使用记录--阿加犀AIBox 6490(realsense+yolox部署)

边缘设备使用记录--阿加犀AIBox 6490(realsense+yolox部署)

边缘设备使用记录--阿加犀AIBox 6490:realsenseyolox部署 前言Realsense SDK ROSYOLOx部署预处理后处理可视化ROS节点 总结 前言 由于6490这个板子是有type-c接口的&#xff0c;所以这里准备用RealsenseYOLOx来先简单做一个实时的目标检测的东西出来&#xff0c;这里也用到上…
阅读更多...
数据开发/数仓工程师上手指南(一)数仓概念总览

数据开发/数仓工程师上手指南(一)数仓概念总览

前言 笔者毕业最开始从事的就是大数据开发和数据仓库建设工作&#xff0c;途中曾担任过人工智能工程师和计算机视觉工程师&#xff0c;没想到最后兜兜转转还是回到了最原本的工作数据开发工程师。但很少有写关于本职工作的技术内容输出。 之前笔者撰文内容大部分都是关于算法…
阅读更多...
echarts里面的option的详细讲解

echarts里面的option的详细讲解

option4 {// 鼠标移动提示框tooltip: {// 触发类型&#xff08;item&#xff1a;用于散点图、饼图。axion&#xff1a;用于柱状图、折线图。none:什么都不触发&#xff09;trigger: axis,// 提示框内排序order: seriesDesc,// 提示框背景颜色backgroundColor: "#FF5800&q…
阅读更多...
python easygui库常用方法介绍

python easygui库常用方法介绍

msgbox() 弹出对话框 这是最基本的弹出对话框&#xff0c;用于显示简单的消息或提示。例如&#xff1a; import easygui easygui.msgbox("欢迎使用EasyGUI!") buttonbox() 带有多个按钮的对话框 它会显示一个带有多个按钮的对话框&#xff0c;用户点击后返回所选…
阅读更多...
“探求新质生产力 推进中国式现代化”学习交流活动在河北廊坊举办

“探求新质生产力 推进中国式现代化”学习交流活动在河北廊坊举办

7月21日&#xff0c;一场以“探求新质生产力 推进中国式现代化”为主题的学习交流活动在河北省廊坊市举办&#xff0c;2000余名企业界人士共同探讨企业发展的新路径与新动力。 7月21日&#xff0c;“探求新质生产力 推进中国式现代化”学习交流活动在河北省廊坊市举办。图为活动…
阅读更多...
【无人机】测绘行业新时代

【无人机】测绘行业新时代

【无人机】测绘行业新时代 无人机测绘主要指的是依托无人机系统为主要的信息接收平台&#xff0c;通过无人机机载遥感信息采集和处理设备&#xff0c;将最终所获取的遥感信息传输到测绘中心&#xff0c;经过数据技术处理&#xff0c;形成立体化的数字模型&#xff0c;以满足行…
阅读更多...
【C++】学习笔记——哈希_2

【C++】学习笔记——哈希_2

文章目录 十八、哈希3. 实现哈希表哈希表的存储节点哈希函数哈希表的定义哈希表的插入哈希表的查找哈希表的删除测试函数完整代码结果 未完待续 十八、哈希 3. 实现哈希表 哈希表的实现方法有蛮多种&#xff0c;这里我们选一个比较经典的开散列法来实现哈希表。由于STL库里的…
阅读更多...
免费【2024】springboot北京医疗企业固定资产管理系统的设计与实现

免费【2024】springboot北京医疗企业固定资产管理系统的设计与实现

博主介绍&#xff1a;✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流✌ 技术范围&#xff1a;SpringBoot、Vue、SSM、HTML、Jsp、PHP、Nodejs、Python、爬虫、数据可视化…
阅读更多...
学术研讨 | 区块链网络体系结构研讨会顺利召开

学术研讨 | 区块链网络体系结构研讨会顺利召开

添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09; 近日&#xff0c;国家区块链技术创新中心组织了“区块链网络体系结构研讨会”&#xff0c;会议面向跨域交互多、计算规模大、数据管理复杂、性能与扩展性要求高等特征的区块链网络的体系结构展开交流研讨&…
阅读更多...
linux下磁盘分区工具GParted

linux下磁盘分区工具GParted

最近发现安装的redhat机器部分磁盘大小分配不合理 使用gpated对磁盘重新分区 1、使用U盘制作一个启动盘 下载启动盘制作工具Index of /downloads 使用非常简单&#xff0c;选择gparted-live-1.1.0-3-i686.iso包即可 2、制作完成后&#xff0c;重启机器&#xff0c;选择U盘…
阅读更多...
【测开能力提升-Javascript】JavaScript运算符流程结构

【测开能力提升-Javascript】JavaScript运算符流程结构

1. 递增递减运算符 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><script>// 前置递增运算符var age10age //类似于ageage1&#xff0c; 先加1后返回值alert(age)// 后置…
阅读更多...
VUE3学习第二篇：报错记录

VUE3学习第二篇：报错记录

1、在我整理好前端代码框架后&#xff0c;而且也启动好了对应的后台服务&#xff0c;访问页面&#xff0c;正常。 2、报错ReferenceError: defineModel is not defined 学到这里报错了 在vue网站的演练场&#xff0c;使用没问题 但是在我自己的代码里就出问题了 3、watchEffec…
阅读更多...
JAVA.4.继承

JAVA.4.继承

1.特点 java只支持单继承&#xff0c;一个儿子继承一个父亲 但可以多层继承&#xff0c;a继承b&#xff0c;b继承c b是a的直接父类&#xff0c;c是a的间接父类 每个类都直接或者简介继承Object&#xff0c;不写继承就默认继承它 2.注意事项 构造方法 父类的构造方法&#…
阅读更多...
Java实现七大排序（二）

Java实现七大排序（二）

一.交换排序 1.冒泡排序 这个太经典了&#xff0c;每个学编程都绕不开的。原理跟选择排序差不多&#xff0c;不过冒泡排序是直接交换。 public static void bubbleSort(int[] array){for (int i 0; i < array.length - 1; i) {for (int j 0; j < array.length-1-i; j…
阅读更多...
unity2D游戏开发02添加组件移动玩家

unity2D游戏开发02添加组件移动玩家

添加组件 给PlayGame和EnemyObject添加组件BoxCollider 2D碰撞器&#xff0c;不用修改参数 给PlayGame添加组件Rigibody 2D 设置数据 添加EnemyObject&#xff0c;属性如下 Edit->project setting->Physics 2D 将 y的值改为0 给playerObject添加标签 新建层 将PlayerObj…
阅读更多...
安宝特方案｜解放双手，解决死角，AR带来质量监督新体验

安宝特方案｜解放双手，解决死角，AR带来质量监督新体验

AR质量监督 解放双手&#xff0c;解决死角 在当今制造业快速发展的背景下&#xff0c;质量监督成为确保产品高质量和完善的管理制度的关键环节。然而&#xff0c;传统的质量监督方式存在诸多挑战&#xff0c;如人工操作带来的效率低下、查岗不及时、摄像头死角等问题。 为了解…
阅读更多...
最新文章

Copyright @ 2022~2023