element-plus icon图标的正确使用姿势
前言:
为了适应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超爽体验,你值得一试 - 掘金 (juejin.cn)
11.24日更新
最近的使用中发现其实不用这个语法糖也可以正常使用icon,写代码的时候我发现组件内部的icon显示就十分正常,
所以可以通过组件化的方法直接使用,但是setup script确实是个好东西,目前来看相关页面也没有出现任何问题。
element-plus icon图标的正确使用姿势相关推荐
- 在Vue3中使用Element Plus Icon图标的几种方式
安装 Element Plus $ npm install @element-plus/icons 在main.js 引入 import * as ElIcon from '@element-plus ...
- Element Plus Icon图标自动引入
安装Icon 图标 # 选择一个你喜欢的包管理器# NPM $ npm install @element-plus/icons-vue# Yarn $ yarn add @element-plus/i ...
- element ui icon 图标 element icon 图标 element图标
参考以下地址, 个人开发网站,内容来自element-ui官网 更新时间 2020年12月31日20:42:35 http://47.98.224.252:8082/tools?activeName= ...
- Vue Element-UI使用icon图标(第三方)--在线版
Element-ui一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,在Vue中使用是很方便的. 关于引用icon(第三方),有一种不用下载项目到本地的方法, 前言 eleme ...
- element icon图标方向旋转
element icon图标方向旋转 style="transform:rotate(90deg)"
- Element Plus最新图标引入以及使用方法,icon动态组件,点击切换图标
最新版本的Element Plus已经移除了Font icon,以下引入以及使用方法为亲测可用的,但是不知道后续是否还会改变,大家可以借鉴一下. 本人使用版本 "element-plus&q ...
- Vue3.0 + Ts 项目框架搭建四:配置 Svg-Icon、Icon图标
1. 在src文件下,创建components/SvgIcon/index.vue组件 <template><divv-if="isExternal":style ...
- android markdown 框架,Android Studio MarkDown风格README的正确打开姿势
万事开头难,这是我的第一篇简书,讲一讲我是怎么在AS上安装MarkDown编辑器插件的. 前言 其实吧刚开始我并没有觉得AS自带的文本编辑器有什么不好,README文件也就是记录一些相关信息,也没想着 ...
- Element-Ui组件(二)Icon 图标
Element-Ui组件(二)Icon 图标 本文参考Element官方文档: http://element-cn.eleme.io/#/zh-CN/component 基本用法 Element内置丰 ...
最新文章
- R语言与数据分析(1) 数据分析流程、数据挖掘、数据可视化
- L - JavaScript继承
- python搭配什么数据库_教你如何优雅地用Python连接MySQL数据库
- Android开发相关操作
- 计算机系统硬件类(Computer System Hardware Classes)
- Scrapy爬虫框架的安装和使用
- 儿歌-宝宝学唱儿歌 ios版
- yum离线安装rpm包
- C# 实体映射,对象映射框架——Mapster
- Apache VirtualHost的配置
- reporting services rdl文件如何不分页
- 关于跑步,总感觉得写点什么!
- GIS地图怎么做?看这篇就够了
- Kylin RT OLAP reassign流程即重新分配replica_set 流程
- 青海省国家湿地公园功能区划数数据、全国湿地沼泽分布数据、全国省市县自然保护区
- 蓝奏云直链解析php,【带源码】新思路--蓝奏云直链解析
- 使用代理服务器爬取网站
- JAVA架构之路(数据加密与常见加密算法)
- java 大数据处理之内存溢出解决办法
- 更新了一下自己的POJO代码生成器