vue3中element-plus icon图标的正确使用姿势

目录
  • 前言：
  • 改变：
  • 错误使用：
  • 正确使用：
  • setup script扩展
  • 更新
  • 总结

前言：

为了适应vue3的更新，element组件也将其内容升级为了plus用以配套的使用，很多组件新增了更加多元的功能，但我用的时候就觉得那个icon图标，怎么变得特别难用呢？原来是没有掌握正确的使用方法

改变：

// 原来
<i class="el-icon-edit"></i>

// plus
 <el-icon :size="size" :color="color">
   <edit></edit>
 </el-icon>

根据文档也能看出，图标从原来的一个样式封装成了一个组件，在今后的版本迭代中可能会赋予图标更多的功能（目前支持尺寸和大小），这无疑是很方便的，但是在使用的时候发现，我的图标为什么显示不出来？？？

错误使用：

根据教程先下载相关包

然后按需引入图标，并使用

实际展示却是：

着实让我头晕了好一阵，后来请教了大佬才知道，影响因素是setup的语法糖

正确使用：

使用vue3给我感觉最深的除了this基本上不使用了，就是所有内容都被包括在setup模块里了，扯远了，再细致的看一下element的示例，就会发现setup在你定义script的时候就被引入了

这就是setup script，vue3的新语法糖，然后你按照这种格式去进行图标的引入，就不会出问题了

只能说很简单啦

setup script扩展

但是大家也会有疑问，图标是能用了，但是我之前setup里面的内容放在哪里呢？

之前的页面逻辑都是这样的

如果使用新的语法糖，export default模块就可以完全省略了，直接在script里面写就完事了，也可以理解为整个script都被setup模块包裹了，在哪写都一样

可以说确实省去了很多麻烦的步骤，但是这个据说还是实验性的功能，所以我也不敢滥用，一般都是将需要图标的模块单独放一个vue，并使用这个语法糖，然后其余功能仍然用之前的方法实现，避免出现问题会影响整个项目，但是如果以后可以大范围使用了，那无疑简化了很多操作。

如果大家对这个语法糖感兴趣，可以去阅读文档：

Vue3 - setup script超爽体验，你值得一试

更新

最近的使用中发现其实不用这个语法糖也可以正常使用icon，写代码的时候我发现组件内部的icon显示就十分正常，

所以可以通过组件化的方法直接使用，但是setup script确实是个好东西，目前来看相关页面也没有出现任何问题。

总结

到此这篇关于vue3中element-plus icon图标的正确使用姿势的文章就介绍到这了,更多相关element-plus icon图标使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue3中element-plus全局使用Icon图标的过程详解

    目录 1.安装图标库 2.注册 3.在组件中直接使用 4.在el-menu组件中动态使用 总结 Vue项目中使用Element-plus的Icon图标,包括按钮和动态菜单 1.安装图标库 npm install @element-plus/icons 2.注册 main.ts文件中引入并注册 import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' impo

  • vue3中element-plus icon图标的正确使用姿势

    vue3中element-plus icon图标的正确使用姿势

    目录 前言: 改变: 错误使用: 正确使用: setup script扩展 更新 总结 前言: 为了适应vue3的更新,element组件也将其内容升级为了plus用以配套的使用,很多组件新增了更加多元的功能,但我用的时候就觉得那个icon图标,怎么变得特别难用呢?原来是没有掌握正确的使用方法 改变: // 原来 <i class="el-icon-edit"></i> // plus <el-icon :size="size" :co

  • Vue项目中如何引入icon图标

    1.下载icon图标,推荐icomoon网站,里面有大量的矢量图标,也可以自定义,当然你也可以去阿里巴巴矢量图标库下载你所需要的小图标.点击进入icomoon网站点击右上角"IcoMoon App",找到自己需要的图标后选择然后点击右下角"Generate Font",接着可以在左上角第二个按钮"Preferences"进行自定义你要下载的图标信息,一般我都是进去改一下"Font Name",然后返回点击右下角"Do

  • Vue Element使用icon图标教程详解(第三方)

    element-ui自带的图标库还是不够全,还是需要需要引入第三方icon,自己在用的时候一直有些问题,参考了些教程,详细地记录补充下 对于我们来说,首选的当然是阿里icon库 教程: 1.打开阿里icon,注册 >登录>图标管理>我的项目 图标管理>我的项目,点进去 新建项目 新建项目 项目名称随便写.前缀注意,不要跟element-ui自带的icon(前缀为:el-icon)重名了. 设置完,点新建 注意前缀.设置完,点新建 现在我们返回阿里icon首页,点进去你想要的icon

  • 在iview+vue项目中使用自定义icon图标方式

    在iview+vue项目中使用自定义icon图标方式

    目录 1. UI设计师会把自己做的图标库上传到阿里巴巴图标库 2. 到购物车中点击添加至项目 3. 给项目起个名字 4. 把下面这些文件放到我的项目的static中 5. 在main.js中全局引入iconfont.css 6. 打开刚才下载好的文件里的demo_index.html 7. 在我的路由中加入icon配置 8. 看结构才发现font-family还是默认的iview设置好的 9. 所以要改变font-family的设置 10. 这样就完美的解决了 最近做一个后台管理系统,是用ivi

  • element使用自定义icon图标的两种解决方式

    element使用自定义icon图标的两种解决方式

    目录 两种情况: 第一种情况解决办法: 第二种情况解决办法: 总结 写项目时,发现 element 里的图标没有我需要的图标, 两种情况: ① 简单的替换小图标,没有选中变色等要求 ② 有选中变色等要求,稍微复杂的需求 第一种情况解决办法: 修改Element UI自带的小图标,替换成自己的  首先找到那个自带的图标class,然后代码如下 .el-icon-sunrise { background: url('你的图片路径') center center no-repeat; backgrou

  • vue中引用阿里字体图标的方法

    想在vue中引用阿里的iconfont,却出现报错 ,原因是没有对应的loader处理字体文件. 解决办法 1.引入css文件 import 'font-awesome/css/font-awesome.min.css' 2.在webpack.config中配置 { test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file-loader' } 总结 以上所述是小编给大家介绍的vue中引用阿里字体图标的方法,希望对大家有所帮助,如果大家有任何疑问请给我留

  • Vue3中使用Element Plus时el-icon无法显示的问题解决

    Vue3中使用Element Plus时el-icon无法显示的问题解决

    目录 问题描述 解决方案 总结 问题描述 按照官方文档安装了icons $ npm install @element-plus/icons 然后在页面中使用 <template> <!-- <Header /> --> <!-- Icon 图标 --> <el-icon><edit /></el-icon> <el-icon><fold /></el-icon> <el-icon&

  • vue element项目引入icon图标的方法

    为了减少页面的加载速度,提高用户体验,对于一些图片决定使用图标代替,但是发现element-ui的图标少得可怜,完全满足不了我的要求,于是决定在element-ui的项目里引入第三方的图标库. 因为阿里巴巴海量的图标,所以决定引入阿里巴巴的图标库 阿里巴巴图标网站: http://www.iconfont.cn/ 下面具体介绍如何使用 1.注册一个阿里巴巴账号,搜索自己需要的图标,添加到购物车,然后点击添加到项目,如果没有项目就需要创建. 2.点击添加到项目后,选中第二个 3.点击更多操作里面的

  • Vue3 封装 Element Plus Menu 无限级菜单组件功能的详细代码

    目录 1 数据结构定义 1.1 菜单项数据结构 1.2 菜单配置数据结构 2 使用 tsx 实现封装 2.1 tsx 基本结构 2.2 定义 prop 2.3 递归实现组件 3 使用 SFC 实现菜单封装 3.1 封装菜单项的渲染 3.2 封装菜单组件 4 测试组件 4.1 菜单测试数据 4.2 测试页面 4.3 运行效果 总结: 本文分别使用 SFC(模板方式)和 tsx 方式对 Element Plus el-menu 组件进行二次封装,实现配置化的菜单,有了配置化的菜单,后续便可以根据路由

随机推荐