首页 > 其他分享 >vue3使用elmentui-plus中的图标

vue3使用elmentui-plus中的图标

时间:2023-04-11 16:57:14浏览次数:43  
标签:UserFilled icons vue3 plus 使用 elmentui 图标

按照官网这样直接引入使用,不知道为啥行不通:

import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

使用时,需要

<script>
  import {
    UserFilled
  } from '@element-plus/icons-vue'// 使用的时候需要单独引入这个图标从库里
  export default {
    components: {
      UserFilled// 单独声明这个
    },
    setup() {
    // 后面都省略了

不知道为啥搞的这么麻烦 ~vue2不管全局还是按需引入后,直接就可以这样使用:<el-button type="primary" icon="el-icon-search">搜索</el-button>

标签:UserFilled,icons,vue3,plus,使用,elmentui,图标
From: https://www.cnblogs.com/fkcqwq/p/17306775.html

相关文章

  • vue3使用体验--用了之后再也不想用vue2
    0.个人推荐使用setup语法糖,看起来更加简洁。<scriptsetup>import{ref,reactive,onMounted}from'vue';constname=ref('李四');   //定义普通数据类型的响应式,获取/修改数据需要.value,在模板中不需要.value,可以直接使用onMounted(()=>{ //某些业务逻辑。 ......
  • Vue3 setup语法糖添加name属性
    1.安装插件vite-plugin-setup-extendnpmivite-plugin-setup-extend-D2.配置vite.config.tsimportvuefrom'@vitejs/plugin-vue'import{defineConfig}from'vite'//引入插件并使用importvueSetupExtendfrom'vite-plugin-vue-setup-extend�......
  • Element Plus错误警告 | Popper: Detected CSS transitions on at least one of the f
    这个错误的解决方案如下:1.禁用"computeStyles"修饰符的adaptive选项:这将允许平滑过渡,但可能会降低性能。禁用"computeStyles"修饰符的adaptive选项,可以在创建Popper实例时指定modifiers参数,并将computeStyles的adaptive属性设置为false。示例如下:import{c......
  • 用quasar+vue3+组合式api 实现小米商城标题栏动画
    先来看一下小米商城标题栏动画:  小米商城标题栏动画主要特点:移入时二级菜单缓慢出现;移出时二级菜单缓慢消失;在一级菜单之间移动时,二级菜单内容直接切换,没有过渡效果。实现思路一、纯css实现(❌)首先肯定是考虑:hover,但是经过试验发现,:hover可以实现鼠标移入移出时的......
  • vue3 el-table-column 修改时间格式
    根据element文档说明,el-table中的el-table-column是可以使用formatter格式化时间的。  先添加绑定函数formatter <el-table-columnprop="createdTimeFormat":formatter="dateFormat"label="日期"width="170"></el-table-column> 新建格式......
  • ZR.Admin小改和VUE3版本体验
    前言孔乙己显出极高兴的样子,将两个指头的长指甲敲着柜台,点头说:“对呀,对呀!......回字有四样写法,你知道么?”大家好,我是44岁的大龄程序员码农阿峰。阿峰从事编程二十年了,虽然没有成为架构师,却也用过很多种架构。几年前开始研究JAVA企业级快速开发框架若依,后来发现了它的.net版本......
  • 使用vue3创建后台管理项目
    最后案例:    一:创建一个Vue应用打开控制台:npminitvue@latest输入你需要创建的项目名称,一路回车   下载需要的包,如下:"dependencies":{"@element-plus/icons-vue":"^2.1.0","axios":"^1.3.5","element-plus"......
  • SpringBoot 集成 MybatisPlus 五——ActiveRecord
    1什么是ActiveRecordActiveRecord(活动记录),是一种领域模型模式,特点是一个模型类对应关系型数据库中的一个表,而模型类的一个实例对应表中的一行记录。在ActiveRecord模式中,对象中既有持久存储的数据,也有针对数据的操作,ActiveRecord模式把数据增删改查的逻辑作为对象的一......
  • Hanoi - plus
    题目描述如果将课本上的汉诺塔问题稍做修改:给定N只盘子,3根柱子,但是允许每次最多移动相邻的M只盘子(当然移动盘子的数目也可以小于M),最少需要多少次? 输入格式输入数据仅有一行,包括两个数N和M(0<=M<=N<=8) 输出格式仅输出一个数,表示需要移动的最少次数 样例输入......
  • MyBatisPlus——代码生成器
    代码生成器快速生成各项代码步骤创建Generator类,并创建main方法创建代码生成器AutoGeneratorautoGenerator=newAutoGenerator();连接要生成实体类的数据库DataSourceConfigdataSource=newDataSourceConfig();dataSource.setDriverName(......