Vue3 SvgIcon组件开发

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

引入iconfont

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

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

在这里插入图片描述

prettier中忽略该文件:

在这里插入图片描述

放入iconfont.js文件:

在这里插入图片描述

开发SvgIcon组件

在这里插入图片描述

vitepress整合

增加菜单

在这里插入图片描述

全局引入和注册

在这里插入图片描述

编写markdown文档:

在这里插入图片描述

编写组件示例:

在这里插入图片描述

执行效果:

在这里插入图片描述

应用到Tree组件

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

在这里插入图片描述

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

在这里插入图片描述

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

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

相关文章

【YOLOv5/v7改进系列】引入CoordConv——坐标卷积

一、导言 与标准卷积层相比&#xff0c;CoordConv 的主要区别在于它显式地考虑了位置信息。在标准卷积中&#xff0c;卷积核在输入上滑动时&#xff0c;仅关注局部区域的像素强度&#xff0c;而忽略其绝对位置。CoordConv 通过在输入特征图中添加坐标信息&#xff0c;使得卷积…

【常用知识点-Linux】查询端口情况

Author&#xff1a;赵志乾 Date&#xff1a;2024-07-22 Declaration&#xff1a;All Right Reserved&#xff01;&#xff01;&#xff01; 1. 简介 ss命令为socket statistics的缩写&#xff0c;是Linux的一个网络管理命令&#xff0c;主要用于获取系统中socket的统计信息&am…

[C/C++入门][for]26、统计满足条件的4位数(循环经典练习)

给定若干个四位数&#xff0c;求出其中满足以下条件的数的个数&#xff1a;个位数上的数字减去千位数上的数字&#xff0c;再减去百位数上的数字&#xff0c;再减去十位数上的数字的结果大于零。 【输入】 输入为两行&#xff0c;第一行为四位数的个数n&#xff0c;第二行为n个…

【SpringBoot】第3章 系统配置之日志配置

SpringBoot自带spring-boot-starter-logging库来实现系统日志功能&#xff0c;spring-boot-starter-logging组件默认使用LogBack日志记录工具。系统运行日志默认输出到控制台&#xff0c;也能输出到文件中。下面通过示例来演示SpringBoot项目配置日志的功能。 修改pom.xml文件…

校园招聘 之 Java HashMap

校园招聘与社会招聘在多个方面存在显著的区别&#xff0c;这些区别主要体现在招聘对象、招聘目的、招聘方式、招聘周期、招聘成本以及入职后的发展等方面。校招也更注重理论知识&#xff0c;俗称八股文&#xff0c;其实有些东西为什么一直拿来问&#xff0c;其实这里面你仔细品…

速盾:cdn技术实现原理是什么?

CDN技术&#xff08;内容分发网络&#xff09;是一种通过将内容部署到离用户更近的服务器上&#xff0c;从而提高网站访问速度和用户体验的技术。它的实现原理主要包括以下几个步骤&#xff1a; 域名解析&#xff1a;用户输入网址&#xff0c;浏览器首先向DNS服务器发送域名解析…

STM32CubeIDE(CAN)

目录 一、概念 1、简述 2、CAN 的几种模式 二、实践 1、环回模式轮询通信 1.1 软件配置 1.2 代码编写 2、环回模式中断通信 2.1 软件配置 2.2 代码编写 一、概念 1、简述 STM32微控制器系列包含多个型号&#xff0c;其中一些型号集成了CAN&#xff08;Controller Are…

Vuex--全局共享数据

目录 一 是什么? 二 怎么用&#xff1f; 三 注意点 一 是什么? 在此之前&#xff0c;我们使用vue的数据全部放在每个组件的data区域里面&#xff0c;这里return里面存的都是这个组件要用到的数据&#xff0c;但是这里面的数据是局部的数据&#xff0c;也就是说这些数据是这…

Chrome v8 pwn 前置

文章目录 参考用到啥再更新啥简介环境搭建depot_tools和ninjaturbolizer 调试turbolizer使用结构数组 ArrayArrayBufferDataViewWASMJSObject结构Hidden Class命名属性-快速属性Fast Properties命名属性-慢速属性Slow Properties 或 字典模式Dictionary Mode编号属性 (Elements…

基于springboot+vue+uniapp的宿舍管理系统小程序

开发语言&#xff1a;Java框架&#xff1a;springbootuniappJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#…

van-dialog 组件调用报错

报错截图 报错原因 这个警告表明 vue 在渲染页面时遇到了一个未知的自定义组件 <van-dialog>&#xff0c;并且提示可能是由于未正确注册该组件导致的。在 vue 中&#xff0c;当我们使用自定义组件时&#xff0c;需要先在 vue 实例中注册这些组件&#xff0c;以便 vue 能…

交易积累-AR

在股票交易分析中&#xff0c;AR&#xff08;Accumulation/Distribution Rating&#xff0c;积累/分配指标&#xff09;是一个反映股票在一定时期内被积累&#xff08;买入&#xff09;或分配&#xff08;卖出&#xff09;情况的指标。它是由美国著名的股票投资者威廉J奥尼尔&a…

本地搭建ros2环境步骤(x86_64架构)

验证效果&#xff1a;ros2跟redis能够相互通信&#xff0c;但不会接收到其它 orin 的 topic 消息&#xff1b;本地的话直接当作slave机器来用 注&#xff1a;ros2 的全局 param 需要依赖一个单点 redis-server&#xff0c;ros2 的全局 param 数据是保存在这个单点 redis-ser…

Json结构解析比较

文章目录 前言正文一、项目简介二、核心代码1、 JavaBeanParser2、 JsonStructCompare3、 Client 测试结果 前言 本次练习&#xff0c;主要是针对于两个Json的结构差异。 多用于测试场景&#xff0c;比如一个很大的Json报文&#xff0c;需要和现有的Json报文对比&#xff0c;看…

【快速逆向二/无过程/有源码】掌上高考—2024高考志愿填报服务平台

逆向日期&#xff1a;2024.07.21 使用工具&#xff1a;Node.js 加密工具&#xff1a;Crypto-js标准库 文章全程已做去敏处理&#xff01;&#xff01;&#xff01; 【需要做的可联系我】 AES解密处理&#xff08;直接解密即可&#xff09;&#xff08;crypto-js.js 标准算法&…

百日筑基第二十八天-23种设计模式-行为型总汇

百日筑基第二十八天-23种设计模式-行为型总汇 文章目录 百日筑基第二十八天-23种设计模式-行为型总汇前言模板方法模式简介模板方式的特点模板方法模式结构类图模板方式模式案例分析模板方法模式应用源码分析模板方法模式的注意事项和细节 迭代器模式迭代器模式结构类图迭代器模…

modbus中3.5字节时间如何计算

示例&#xff1a;波特率是115200bps &#xff08;比特每秒&#xff09; 1、计算每个比特的时间 2、每字节时间 1个字符8数据位1起始位1停止位&#xff0c;则每传输一个字符需要10位 3、3.5个字节的时间

c 语言 中 是否有 unsigned 安;这种写法?

你提到的结构体定义使用了unsigned这种没有完全限定类型的写法&#xff0c;在C语言中&#xff0c;这种语法通常会被解释为unsigned int。这是因为在C语言中&#xff0c;unsigned是unsigned int的缩写形式。 下面是你的结构体定义以及解释&#xff1a; struct exec {unsigned …

【Linux】进程信号 --- 信号处理

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前正在学习c和算法 ✈️专栏&#xff1a;Linux &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章有啥瑕疵&#xff0c;希望大佬指点一二 如果文章对…

睿考网:没有初级能直接考中级经济师吗?

经济师考试分为初级、中级、高级三个类别&#xff0c;属于职业资格证书&#xff0c;考试是由统一组织、统一大纲、统一命题的方式。 没有初级可以直接考中级经济师吗? 可以直接报考&#xff0c;如果考生符合中级经济师报考要求&#xff0c;直接报名参加就可以&#xff0c;具…