vue3项目中使用antd图标

news/2024/5/30 17:44:52/文章来源:https://blog.csdn.net/m0_52276756/article/details/136655075

在项目中使用ant-design组件库主要是分为基本组件和图标,组件和图标的包是不一样的。

只安装ant-design时使用组件和图标

npm install ant-design-vue
yarn add ant-design-vue

项目中全局引入ant-design

// 引入所有图标
import * as Icons from "@ant-design/icons-vue";
// 全局注册
const app = createApp(App);
Object.keys(Icons).forEach((key: any) => {app.component(key, Icons[key])
})
// 添加到全局(可加可不加)
app.config.globalProperties.$icons= Icons
app.use(Antd).use(router).mount('#app')

使用

没有app.config.globalProperties.$icons= Icons

可使用短横线链接的形式或首字母大写的形式

<template><div><component is="radar-chart-outlined"></component><component is="RadarChartOutlined"></component></div>
</template>
app.config.globalProperties.$icons= Icons

必须使用首字母大写的形式

<template><div><component :is="$icons['StepBackwardOutlined']"></component><component :is="$icons[myicon]"></component></div>
</template>
<script setup>import {ref} from 'vue'const myicon = ref("RadarChartOutlined")
</script>

单独安装了图标的包时使用图标

npm install @ant-design/icons-vue
yarn add @ant-design/icons-vue

在script中引入

setup
<script setup>
import { UserOutlined } from '@ant-design/icons-vue';
</script>
没有setup,需要在componets中注册组件
<script>
import { UserOutlined } from '@ant-design/icons-vue';
export default defineComponent({components: {UserOutlined},
});
</script>

使用

<template><div><UserOutlined/></div>
</template>

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

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

相关文章

【AI+编程】利用chatGPT编写python程序处理日常excel工作提升效率小技巧

之前写过一篇AI编程相关的文章 【人工智能】为啥我最近很少写python编程文章了&#xff0c;浅谈AI编程RPA提升工作效率 。 最近有同学私信我&#xff0c;怎么利用AI编程来提升工作效率&#xff0c;除了文章里讲的 使用AI帮忙写算法、代码提示、代码优化、不同语言转换(如J…

HTML静态网页成品作业(HTML+CSS)——电影加勒比海盗介绍设计制作(1个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有1个页面。 二、作品演示 三、代…

Prompt进阶3:LangGPT(构建高性能质量Prompt策略和技巧2)--稳定高质量文案生成器

Prompt进阶3:LangGPT(构建高性能质量Prompt策略和技巧2)–稳定高质量文案生成器 1.LangGPT介绍 现有 Prompt 创建方法有如下缺点&#xff1a; 缺乏系统性&#xff1a;大多是细碎的规则&#xff0c;技巧&#xff0c;严重依赖个人经验缺乏灵活性&#xff1a;对他人分享的优质 …

Python之requests实现github模拟登录

文章目录 github 模拟登录前言模拟登录流程抓包操作查看登录表单的内容登录操作 模拟登录操作在 main函数的调用获得 auth_token调用/session接口登录处理检测登录是否成功 总结&#xff1a; github 模拟登录 前言 前面学习了requests模块的基础学习后&#xff0c;接下来做一个…

【开发】微服务整合Sentinel

目录 前言 1W&#xff1a;什么是Sentinel&#xff1f; 2W&#xff1a;为什么使用Sentinel&#xff1f; 3W&#xff1a;如何使用Sentinel&#xff1f; 1. 在pom.xml中导入Sentinel依赖坐标 2. 配置控制台 3. 访问API接口的任意端点 流量控制 1. 簇点链路 2. 快速入门…

springboot整合swagger,postman,接口规范

一、postman介绍 1.1概述 工具下载 Postman&#xff08;发送 http 请求的工具&#xff09; 官网&#xff08;下载速度比较慢&#xff09;&#xff1a;Download Postman | Get Started for Free 网盘下载&#xff1a;百度网盘 请输入提取码 1.2Http 请求格式 请求地址请求方法状…

sqllab第六关通关笔记

知识点&#xff1a; 报错注入回顾原始语句测试截取函数 mid(字符串&#xff0c;起始位置&#xff0c;长度)substr(字符串&#xff0c;起始位置&#xff0c;长度)left(字符串&#xff0c;长度)right(字符串&#xff0c;长度)加入截取控制的错误注入payload payload:id1"%2…

在 Shell 中转换 Python 正则表达式

在Shell中&#xff0c;我们通常可以使用sed命令来转换Python正则表达式。sed是一个流编辑器&#xff0c;可以用来对文本进行替换、删除等操作。下面是一个示例&#xff0c;演示如何在Shell中将Python正则表达式转换为适用于sed的格式&#xff0c;也是比较稳妥的一种方式。 如上…

前端之用html做一个用户登陆界面

用户登陆界面 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>用户注册页面</title></head> <body><form action"https://www.baidu.com" method"post">…

opencv的approxPolyDP函数

cv2.approxPolyDP() 是 OpenCV 库中的一个函数&#xff0c;用于逼近多边形曲线。它可以将一条曲线用更少的点来表示&#xff0c;同时尽可能地保持其形状。原来是使用Douglas-Peucker算法&#xff0c;表示曲线上的点与逼近后的多边形之间的最大距离d&#xff0c;若d小于epsilon&…

如何恢复丢失未保存的 Word 文档指南

在广阔的数字领域&#xff0c;对丢失未保存的 Word 文档的恐惧对于用户来说是再熟悉不过的焦虑了。本指南旨在对用户可能发现自己迫切需要恢复未保存文档的各种场景进行详尽的探索。无论是由于保存失败、意外的系统崩溃还是令人心碎的意外删除&#xff0c;请放心&#xff0c;我…

【Vite+Ts】自动按需引入Element-Plus

安装插件 cnpm i -D unplugin-vue-components unplugin-auto-import unplugin-element-plus修改vite.config.ts // vite.config.ts import AutoImport from "unplugin-auto-import/vite"; import Components from "unplugin-vue-components/vite"; impor…

以太坊ETF获批将至

作者&#xff1a;BitMEX Research 编译&#xff1a;秦晋 摘要&#xff1a;在这篇文章中&#xff0c;我们讨论了以太坊ETF将在美国获得批准的可能性。我们尤其关注质押的经济学&#xff0c;以及缺乏收益率会如何在一定程度上削弱非质押以太坊ETF产品的吸引力。我们还研究了实施质…

CBNet(AAAI 2020)论文解析

paper&#xff1a;CBNet: A Novel Composite Backbone Network Architecture for Object Detection official implementation&#xff1a;GitHub - VDIGPKU/CBNet_caffe: Composite Backbone Network (AAAI20) 背景 一般来说&#xff0c;在基于CNN的目标检测模型中&#xff…

JAVA-网络编程基础

JAVA-网络编程 01. 网络通信 概念&#xff1a;两台设备之间通过网络实现数据传输网络通信&#xff1a;将数据通过网络从一台设备传输给另一台设备java.net包下提供了一系列类或接口&#xff0c;供程序员使用&#xff0c;完成网络通信 02. 网络 概念&#xff1a;两台设备或…

【PLIO学习总结】laserMapping中的时间戳与状态更新逻辑

本文仅用于个人学习总结记录。如有错误&#xff0c;请批评指正。 0、PLIO简要思路 从PLIO的论文中&#xff0c;可以知道&#xff0c;完整的PLIO算法采用IMU和LiDAR数据同时作为“输入”&#xff0c;维护状态变量包括加速度和角速度。 同时&#xff0c;PLIO是一种distortion-…

300分钟吃透分布式缓存-21讲:Redis读取请求数据后,如何进行协议解析和处理?

Redis 协议解析及处理 协议解析 上一课时讲到&#xff0c;请求命令进入&#xff0c;触发 IO 读事件后。client 会从连接文件描述符读取请求&#xff0c;并存入 client 的 query buffer 中。client 的读缓冲默认是 16KB&#xff0c;读取命令时&#xff0c;如果发现请求超过 1GB…

keycloak18.0.0==前后端分离项目中使用,前端react后端springboot

配置keycloak 启动keycloak18 新建一个realm,名字叫test1 新建两个client&#xff0c;一个用于前端&#xff0c;一个用于后端 第一个 react http://localhost:8081/auth/realms/test1/react/ 第二个 backend-service 在两个client下分别创建role testRole backend-servic…

王道OnlineJudge 14

题目 二叉树层次建树就是一层一层的建树&#xff0c;从左到右。随着纵向层次的深入&#xff0c;结点的数量变化规律为&#xff1a;1→2→4→8→16→32。 先画图&#xff0c;然后看图可闭眼写代码 右边为辅助队列&#xff0c;有多少个二叉树结点&#xff0c;就有多少个辅助队…

构建高效可靠的消息队列系统:设计与实现

✨✨谢谢大家捧场&#xff0c;祝屏幕前的小伙伴们每天都有好运相伴左右&#xff0c;一定要天天开心哦&#xff01;✨✨ &#x1f388;&#x1f388;作者主页&#xff1a; 喔的嘛呀&#x1f388;&#x1f388; 目录 一、引言 二、设计目标 2.1、高可用性 1. 集群搭建 1.1 …