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;使得卷积…

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 能…

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个字节的时间

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

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

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

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

通过iframe嵌套的不同域名的页面之间处理cookie存储失败的问题——js技能提升

最近同事在写mvc的后台管理系统&#xff0c;通过iframe实现不同域名的页面的嵌套。 但是有个问题&#xff0c;就是从父页面打开iframe的子页面时&#xff0c;需要登录子页面&#xff0c;此时需要将子页面登录后的token存储到子页面的cookie中&#xff0c;方便子页面的其他接口…

SpringBoot+Session+redis实现分布式登录

SpringBootSessionRedis实现分布式登录功能实现 文章目录 目录 文章目录 前言 一、引库 二、修改配置文件 三、使用 四、解决乱码问题 1.引库 2.配置redis序列化 3.配置Session-Redis序列化 前言 这里简单介绍一下&#xff0c;如果你想多台机器部署你的项目的话&#xff0c;在…

Maven的常用命令(面试篇之Maven)

我在写项目时,使用Maven的插件的命令来进行打包等,却发现报错误了,虽然解决了, 但借此机会来总结一下Maven的常用命令: 这些插件都有着自己的命令,虽然,我们可以简化的使用一些idea中的方便的按键: 但 , 一个程序员的功力深浅就在这些细节末尾处: 在Maven中&#xff0c;插件是…

【MySQL进阶之路 | 高级篇】范式概述与第一范式

1. 范式简介 在关系型数据库中&#xff0c;关于数据表的设计的基本原则&#xff0c;规则就称为范式。可以理解为&#xff0c;一张数据表的设计结果需要满足的某种设计标准的级别。要想设计一个结构合理的关系型数据库&#xff0c;必须满足一定的范式。 范式的英文名是Normal …

OpenHarmony 入门——ArkUI 自定义组件之间的状态装饰器小结(一)

文章大纲 引言一、状态管理概述二、基本术语三、状态装饰器总览 引言 前面说了ArkTS 是在TypeScript基础上结合ArkUI框架扩展定制的&#xff0c;状态管理中的各种装饰器就是扩展的功能之一&#xff0c;可以让开发者通过声明式UI快速高效实现组件之间的数据同步&#xff0c;至于…

Leetcode之string

目录 前言1. 字符串相加2. 仅仅反转字母3. 字符串中的第一个唯一字符4. 字符串最后一个单词的长度5. 验证回文串6. 反转字符串Ⅱ7. 反转字符串的单词Ⅲ8. 字符串相乘9. 打印日期 前言 本篇整理了一些关于string类题目的练习, 希望能够学以巩固. 博客主页: 酷酷学!!! 点击关注…

转置卷积方法

一、定义 1、卷积神经网络层通常会减少&#xff08;或保持不变&#xff09;采样输入图像的空间维度&#xff08;高和宽&#xff09;&#xff0c;另一种类型的卷积神经网络层&#xff0c;它可以增加上采样中间层特征图的空间维度&#xff0c; 用于逆转下采样导致的空间尺寸减小…

【BES2500x系列 -- RTX5操作系统】系统启动流程 -- boot loader概念讲解 --(九)

&#x1f48c; 所属专栏&#xff1a;【BES2500x系列】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &#x1f49…