vue3中如何引入element-icon并使用

news2024/11/25 18:26:38

简单来说,步骤就是:
安装——注册——按需引入——使用

安装

# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue

注册

您需要从 @element-plus/icons-vue 中导入所有图标并进行全局注册。

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

按需引入

<script>
import {ArrowDown} from "@element-plus/icons-vue";

export default {
  name: "APP",
  components: {
    ArrowDown
  }
}
</script>

接下来就可以使用了~

使用

<div class="flex flex-wrap items-center">
        <el-dropdown>
          <span class="el-dropdown-link">
            Dropdown List
            <el-icon class="el-icon--right">
              <arrow-down/>
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>Action 1</el-dropdown-item>
              <el-dropdown-item>Action 2</el-dropdown-item>
              <el-dropdown-item>Action 3</el-dropdown-item>
              <el-dropdown-item disabled>Action 4</el-dropdown-item>
              <el-dropdown-item divided>Action 5</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
<style scoped>
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>

实例效果

在这里插入图片描述

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

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

相关文章

【BI软件】零编程构建财务分析模型(行计算模型)

上一讲和大家讲到&#xff0c;自定义SQL是用个性化的开发去满足个性化的需求&#xff0c;而分析模型则是用共性的开发去满足个性化的需求。而分析模型的好处显而易见&#xff0c;通过分析模型来开发报表&#xff0c;更灵活、更高效&#xff0c;而且开发及运维的成本非常低。同时…

C++中引用的基本内容

个人主页&#xff1a;平行线也会相交 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 平行线也会相交 原创 收录于专栏【C之路】 引用&#xff0c;其实没啥特别的&#xff0c;就是起外号&#xff0c;或者说起小名。就比如说孙悟空就有很多外号&#xff0c;如…

基于Python实现个人手机定位分析

TransBigData是一个为交通时空大数据处理、分析和可视化而开发的Python包。本文就来用它实现个人手机定位分析&#xff0c;感兴趣的小伙伴可以了解一下 但其实交通时空大数据并不仅仅局限于交通工具产生的数据&#xff0c;我们的日常生活中也会产生大量的数据。比如我们的手机…

前端 百度地图绘制路线加上图片

使用百度官方示例的方法根据起终点经纬度查询驾车路线但是只是一个线路 <template><div class"transportInfo"><div id"mapcontainer" class"map">11</div><div class"collapse"><el-collapse v-mo…

CA(证书颁发机构)

CA 根证书路径/csk-rootca/csk-ca.pem&#xff1b; ~ 签发数字证书&#xff0c;颁发者信息&#xff1a;(仅包含如下信息) C CN ST China L BeiJing O skills OU Operations Departments CN CSK Global Root CA 1.修改证书的路径以及相关配置 vi /etc/pki/tls/op…

el-upload文件上传组件的封装

样式1 样式2 上传的格式 // annexUrl 数据格式如下[{"uid": 1682329534561,"name": "2023/04/24/273f36b860a74e79be3faed3ce20236f.pdf","suffix": ".pdf","url": "http://192.168.0.254:19000/annex/2023/…

JVM系列(十) 垃圾收集器之 Parallel Scavenge/Old

上篇文章我们讲解了单线程垃圾收集器 Serial/SerialOld &#xff0c;与之相对应的多线程垃圾收集器就是 Parallel Scavenge/Old&#xff0c; 本文我们讲解下多线程垃圾收集器 Parallel Scavenge/Old 垃圾收集器 新生代收集器&#xff1a; Serial、ParNew、Parallel Scavenge&…

数据库 | 什么是视图?怎么使用?什么是索引?

目录 一、视图 1 、视图概念 2、为什么要使用视图 3 、性能问题 4 、定义视图 5、查看视图 6、删除视图 二、索引 1、引入索引的问题 2、索引是什么 3、索引为什么选择b树 一、视图 1 、视图概念 视图&#xff08;View&#xff09;是一种虚拟存在的表&#xff0c;对…

【DRF配置管理】如何建立完善的DRF自带接口docs文档

原文作者&#xff1a;我辈李想 版权声明&#xff1a;文章原创&#xff0c;转载时请务必加上原文超链接、作者信息和本声明。 DRF应用和管理 【DRF配置管理】Django使用DRF框架 【DRF配置管理】如何实现JWT认证 【DRF配置管理】如何在视图函数配置参数(一) 【DRF配置管理】如何…

okcc呼叫问题的解决方法(建议收藏)

很多客户开始使用OKCC呼叫中心系统&#xff0c;运营经常遇到的问题是呼叫打不通&#xff0c;无话单&#xff0c;呼叫秒挂&#xff0c;语音提示"您没有使用业务的权限"等等异常情况&#xff0c;而且反馈线路正常&#xff0c;使用呼叫系统拨打就是呼不通。 OKCC系统…

史上最烂 spring aop 原理分析

盗引中篇spring aop spring aop: jdk 动态代理和 cglib 动态代理的特点、区别、使用方式、原理及各自对反射的优化、二者在 spring 中的统一、通知顺序、从 Aspect 到 Advisior、静态通知调用、动态通知调用。 版本 jdk&#xff1a;8spring&#xff1a;5.3.20spring boot&…

华为OD机试(20222023)真题目录 + 考点 + 复盘思路

大家好&#xff0c;我是哪吒。 本专栏包含了最新最全的华为OD机试真题&#xff0c;有详细的分析和Java代码解答。已帮助1000同学顺利通过OD机考&#xff0c;发现新题目&#xff0c;随时更新。 以下为华为OD机试真题题库。 1、华为OD机试真题&#xff08;Java&#xff09;&am…

创建型模式-原型模式

原型模式 介绍 用一个已经创建的实例作为原型&#xff0c;通过复制该原型对象来创建一个和原型对象相同的新对象 结构 原型模式包含如下角色&#xff1a; 抽象原型类&#xff1a;规定了具体原型对象必须实现的的 clone() 方法。具体原型类&#xff1a;实现抽象原型类的 cl…

Linux文本处理三大利器Grep、AWK、Sed

写在前面 Linux三剑客是文本处理工具&#xff0c;它们可以帮助我们快速、高效地对文本进行处理。其中包括了grep、awk、以及sed这三个强大的命令行工具。 Linux 三剑客主要作用: grep&#xff0c;它可以根据正则表达式查找相关内容并打印对应的数据。awk&#xff0c;它可以根…

redhat8配置vsftpd服务

目录 一、匿名访问模式 1.1、ftp服务器端修改配置&#xff08;配置文件&#xff1a;/etc/vsftpd/vsftpd.conf&#xff09; 1.2 修改ftp目录的权限 1.3 设置selinux服务对ftp服务的访问规则策略为允许 1.4 防火墙添加ftp服务 1.5 测试 二、本地用户模式 2.1 服务端修改配…

6、什么是类型断言?

虽然 TypeScript 很强大&#xff0c;但有时还不如我们了解一个值的类型方便&#xff0c;这时候我们更希望 TypeScript 不要帮我们进行类型检查&#xff0c;而是交给我们自己来&#xff0c;所以就用到了类型断言。类型断言有点像是一种类型转换&#xff0c;它把某个值强行指定为…

Vue收集表单数据学习笔记

收集表单数据 v-model双向数据绑定&#xff0c;收集的是input框的value&#xff0c;单选按钮不存在value&#xff0c;就像代码中的男女选项&#xff0c;即使绑定性别v-model“sex”&#xff0c;控制台依然不能接收性别的值&#xff0c;因为没有value值&#xff0c;&#xff0c…

python 第二章——数据类型详解

文章目录 前言一、什么是数据类型1.变量2.注释 二、数字三、字符串四、布尔五、列表六、元组七、集合八、字典总结 前言 本系列教程目录&#xff0c;可点击这里查看&#xff1a;Python教程目录 学习一门编程语言&#xff0c;第一件事就应该是熟练掌握这门编程语言的基本数据类…

[Java]JavaWeb开发中的MVC设计模式

一、有关Java Web与MVC设计模式 学习过基本Java Web开发的人都已经了解了如何编写基本的Servlet&#xff0c;如何编写jsp及如何更新浏览器中显示的内容。但是我们之前自己编写的应用一般存在无条理性&#xff0c;对于一个小型的网站这样的编写没有任何问题&#xff0c;但是一但…

MCDF代码详解,mcdf_rgm_pkg.sv代码超详细注释

寄存器模块代码详解 好戏开始: `include "param_def.v" package mcdf_rgm_pkg; import uvm_pkg::*; `include "uvm_macros.svh" import reg_pkg::*; //具有uvm_reg类型的专用寄存器描述[write-red-reg] class ctrl_reg extends uvm_r…