当前位置: 首页 > news >正文

在vue3中使用Element-plus的图标

首先安装Element-Plus-icon

# 选择一个你喜欢的包管理器# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue

如何使用

Element-Plus-icon官方文档链接Icon 图标 | Element Plus (element-plus.org)icon-default.png?t=N7T8https://element-plus.org/zh-CN/component/icon.html#icon-collection

在main.ts中引入Element-Plus-icon

import * as ElementPlusIconsVue from '@element-plus/icons-vue'Object.keys(ElementPlusIconsVue).forEach((key) => {app.component(key, ElementPlusIconsVue[key])
})

第一种直接点击图标复制<el-icon>

                    <el-icon><ArrowRight /></el-icon>

第二种通过icon="el-icon-plus" 

<el-button type="success" icon="el-icon-plus" >1111
</el-button>

第三种通过SVG

<template><div style="font-size: 20px"><!-- 由于SVG图标默认不携带任何属性 --><!-- 你需要直接提供它们 --><Edit style="width: 1em; height: 1em; margin-right: 8px" /><Share style="width: 1em; height: 1em; margin-right: 8px" /><Delete style="width: 1em; height: 1em; margin-right: 8px" /><Search style="width: 1em; height: 1em; margin-right: 8px" /></div>
</template>

相关文章:

在vue3中使用Element-plus的图标

首先安装Element-Plus-icon # 选择一个你喜欢的包管理器# NPM $ npm install element-plus/icons-vue # Yarn $ yarn add element-plus/icons-vue # pnpm $ pnpm install element-plus/icons-vue 如何使用 Element-Plus-icon官方文档链接Icon 图标 | Element Plus (element-…...

图扑智慧农业:农林牧数据可视化监控平台

数字农业是一种现代农业方式&#xff0c;它将信息作为农业生产的重要元素&#xff0c;并利用现代信息技术进行农业生产过程的实时可视化、数字化设计和信息化管理。能将信息技术与农业生产的各个环节有机融合&#xff0c;对于改造传统农业和改变农业生产方式具有重要意义。 图…...

js 加解密 jsencrypt(非对称加密 rsa)

这是一个非对称加密的库&#xff0c;可以进行 rsa 加解密 使用方法 安装 npm install jsencrypt --save jsencrypt rsa 加解密 let rsaStr "这就是一个RSA加密的测试";let jsencryptObj new jsencrypt();jsencryptObj.getKey(); //这个方法用来生成一个密钥对…...

xlua游戏热更新(lua访问C#)

CS.UnityEngine静态方法访问unity虚拟机 创建游戏物体 CS.UnityEngine.GameObject(new by lua);静态属性 CS.UnityEngine.GameObject(new by lua); -- 创建 local camera CS.UnityEngine.GameObject.Find(Main Camera); --查找 camera.name Renamed by Lua;访问组件 loca…...

04-Spring中Bean的作用域

Bean的作用域 scope的属性值 属性值作用singleton默认单例prototype原型每调用一次getBean()方法则获取一个新的Bean对象 , 每次注入的时候都是新对象request一个请求对应一个Bean仅限于在WEB应用中使用 , 需要引入web的框架如SpringMvc(global) session一个会话对应一个Bean…...

xlua游戏热更新(C#访问lua)

xlua作为Unity资源热更新的重要解决方案api&#xff0c;在Tecent重多游戏中被采用&#xff0c;本文通过案例去讲解xlua代码结构层次。 /** Tencent is pleased to support the open source community by making xLua available.* Copyright (C) 2016 THL A29 Limited, a Tence…...

【数据结构】二叉树经典例题---<你真的掌握二叉树了吗?>(第一弹)

一、已知一颗二叉树如下图&#xff0c;试求&#xff1a; (1)该二叉树前序、中序和后序遍历的结果。 (2)该二叉树是否为满二叉树&#xff1f;是否为完全二叉树&#xff1f; (3)将它转换成对应的树或森林。 (4)这颗二叉树的深度为多少? (5)试对该二叉树进行前序线索化。 (6)试对…...

基于springboot实现桥牌计分管理系统项目【项目源码】

基于springboot实现桥牌计分管理系统演示 JAVA简介 JavaScript是一种网络脚本语言&#xff0c;广泛运用于web应用开发&#xff0c;可以用来添加网页的格式动态效果&#xff0c;该语言不用进行预编译就直接运行&#xff0c;可以直接嵌入HTML语言中&#xff0c;写成js语言&#…...

机器学习——朴素贝叶斯

目录 一、贝叶斯方法 背景知识 贝叶斯公式 二、朴素贝叶斯原理 判别模型和生成模型 1&#xff0e;朴素贝叶斯法是典型的生成学习方法 2&#xff0e;朴素贝叶斯法的基本假设是条件独立性 3&#xff0e;朴素贝叶斯法利用贝叶斯定理与学到的联合概率模型进行分类预测 用于文…...

【PTE-day07 文件上传2】

1、常见的绕过方式 (1)畸形后缀名绕过 .php、.pht、.php3、.php4、.php5、.php2、.phtml、.pHp、.html、.Htm......(2)双写过滤字符绕过 (3).htaccess文件绕过 <FilesMatch "jpg"> SetHandler application/x-httpd-php...

设计模式之十一:代理模式

代理可以控制和管理访问。 RMI提供了客户辅助对象和服务辅助对象&#xff0c;为客户辅助对象创建和服务对象相同的方法。RMI的好处在于你不必亲自写任何网络或I/O代码。客户程序调用远程方法就和运行在客户自己本地JVM对对象进行正常方法调用一样。 步骤一&#xff1a;制作远程…...

在spring boot中调用第三方接口时重试问题

文章目录 前言 spring-retry对第三方接口做重试&#xff0c;和处理操作 一、引入依赖 <!--重试请求的注解依赖--><dependency><groupId>org.springframework.retry</groupId><artifactId>spring-retry</artifactId></dependency>&l…...

记录一次多数据源配置失效的情况

说明&#xff1a;在一些复杂的业务情景&#xff0c;比如我们需要在一个订单审核通过后&#xff0c;在将数据库状态修改的同时&#xff0c;将订单与订单详细这两条数据写入到另一个数据库中。我们就可以通过在配置文件中&#xff0c;配置多数据源&#xff0c;然后通过在Mapper的…...

EasyExcel导出替换列中的变量

基于easyexcel2.0版本 easyexcel官网&#xff1a;https://easyexcel.opensource.alibaba.com/docs/2.x/quickstart/write 测试代码地址&#xff1a;https://gitee.com/wangtianwen1996/cento-practice/blob/master/src/test/java/com/xiaobai/easyexcel/DynamicHeadTest.java …...

机器人规划算法——将多边形障碍物离散到地图像素点上?

问题一&#xff1a;如何判断一个点是否在多边形区域内&#xff1f; 方法1&#xff1a;向量叉乘判别法 设多边形的顶点依次为A1&#xff0c;A2…An&#xff0c;要判断的点为P&#xff0c;那么分别计算向量PA1叉乘向量PA2&#xff0c;向量PA2叉乘向量PA3&#xff0c;…&#xff…...

windows11使用docker部署安装minio

时间 2023-11-08 windows11使用docker部署安装minio 目录 1.docker 下载镜像2.docker安装镜像3.访问控制台4.安装问题解决5.使用教程 1.docker 下载镜像 调整镜像源到国内&#xff0c;否则会很慢 docker pull minio/minio2.docker安装镜像 设置用户名和密码时需要注意&…...

【JavaEESpring】Spring Web MVC⼊⻔

Spring Web MVC 1. 什么是 Spring Web MVC1.1 什么是 MVC ?1.2 是什么 Spring MVC? 2. 学习 Spring MVC2.1 建立连接2.2 请求2.3 响应 3. 相关代码链接 1. 什么是 Spring Web MVC 官⽅对于 Spring MVC 的描述是这样的&#xff1a; 1.1 什么是 MVC ? MVC 是 Model View C…...

flutter逆向 ACTF native app

前言 算了一下好长时间没打过CTF了,前两天看到ACTF逆向有道flutter逆向题就过来玩玩啦,花了一个下午做完了.说来也巧,我给DASCTF十月赛出的逆向题其中一道也是flutter,不过那题我难度降的相当之低啦,不知道有多少人做出来了呢~ 还原函数名 flutter逆向的一大难点就是不知道l…...

【Redis】set 集合

上一篇&#xff1a;list 列表 https://blog.csdn.net/m0_67930426/article/details/134364315?spm1001.2014.3001.5501 目录 Sadd Smembers Sismember Scard Srem ​编辑Srandomember Spop Smove 集合类 Sdiff Sinter Sunion 官网 https://redis.io/commands/?…...

【算法与设计模式】

一、数据结构与算法 1、算法性能评估 时间复杂度、空间复杂度 2、数据结构 数组与列表 队列 堆栈 链表 二叉树 多叉树 递归算法 二、设计模式 1、单例 &#xff08;1&#xff09;GIL&#xff1a;线程互斥锁。保证同一时刻只有一个线程在进行。 &#xff08;2&#xff09…...

JavaScript 中的 ES|QL:利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

AI病理诊断七剑下天山,医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

LangChain知识库管理后端接口:数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

PostgreSQL——环境搭建

一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在&#xff0…...