点赞 + 关注 + 收藏 = 学会了
这是一篇对日常工作没什么帮助的文章~
Element UI
和 Element Plus
的 icon
用法是不一样的,在 Element Plus
中都改成了 svg
。
我习惯了 Element UI
的用法,但又喜欢用 Vue3
,所以就在 Element Plus
的基础上二次封装了一个语法有点像 Element UI
里 icon
的组件出来。
虽然在我日常的 Vue3
项目中不会用本文所讲的这个组件,但我还是要搞出来。因为我真的好闲。
type
属性使用指定的 svg
图标。size
属性传入 number 或者 string 都行,Element Plus
只支持 number
,所以用的时候需要 v-bind:size="20"
这样写,或者用简写,但有时候还是会忘记加 v-bind
,所以直接支持 size=“20” 这样的字符串会更方便。type
属性支持首字母小写,Element Plus
使用的 svg
是大驼峰格式的,但有些短的单词有时候真的会忘记首字母大写。color
属性直接照搬回 Element Plus
的。最终的使用方式
<e-icon type="Aim" :size="36" color="rgba(53, 131, 208, 0.5)" />
因为是二次封装,所以不能用回 <el-icon>
,这是 Element Plus
的组件。
本次封装的目的是简化 icon
的使用方式,所以我把标签名也跟着简化了,变成 <e-icon>
打包出来的体积可能会大一丢丢。
开发中涉及的技术点:
Element Plus
提供的 svg
图标本文的例子主要使用 props
的方式进行组件通讯。
本例的代码比较简单,对应代码,跟着我的实现步骤来看。
以下是我的实现步骤:
svg
图标icon
样式size
、color
和 type
size
也兼容字符串类型(Element Plus
只支持 number
)svg
图标<template> <ElIcon :size="size2Number" :color="color"> <!-- 动态组件 --> <component :is="currentIcon"></component> </ElIcon> </template> <script> export default { name: 'EIcon' } </script> <script setup> import { computed } from 'vue' import { ElIcon } from 'element-plus' import * as Icons from '@element-plus/icons-vue' // 【步骤1】全量引入svg图标 import 'element-plus/es/components/icon/style/css' // 【步骤2】全量引入svg图标 // 【步骤3】接收父组件传入的 size、color 和 type const props = defineProps({ size: { // 图标尺寸 type: [Number, String], default: 14, validator(value) { return !isNaN(value) } }, color: { // 图标颜色 type: String, default: 'inherit' }, type: { // 图标类型 type: String, default: '' } }) // 【步骤4】size转换成数值型 const size2Number = computed(() => { if (isNaN(props.size)) { return 20 } return Number(props.size) }) // 【步骤6】动态获取图标 const currentIcon = computed(() => { let iconType = props.type let icon = null if (iconType !== '') { // 【步骤5】首字母大写 icon = iconType.replace(iconType[0],iconType[0].toUpperCase()) } return Icons[icon] // 通过中括号的方式动态获取 }) </script>
做这类组件,我通常会给组件一个 name
,可以看到上面的代码是有 name
的,并且这个 script
没加 setup
<script> export default { name: 'EIcon' } </script>
在页面中引入并使用
<template> <div> <EIcon type="Aim" :size="36" color="rgba(53, 131, 208, 0.5)" /> </div> </template> <script setup> import EIcon from '@/components/EIcon/index.vue' </script>
你也可以在 main.js
里 通过 app.use
全局注册该组件。