网络日志

二次封装el-icon

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第2天,点击查看活动详情

简介

点赞 + 关注 + 收藏 = 学会了

这是一篇对日常工作没什么帮助的文章~

如果你还不太清楚 Element Plusicon 是如何使用的,可以先阅读 《Element Plus 的 el-icon 到底怎么用》

Element UIElement Plusicon 用法是不一样的,在 Element Plus 中都改成了 svg

我在 《Element Plus 的 el-icon 到底怎么用》 里也对比过用法。

我习惯了 Element UI 的用法,但又喜欢用 Vue3 ,所以就在 Element Plus 的基础上二次封装了一个语法有点像 Element UIicon 的组件出来。

虽然在我日常的 Vue3 项目中不会用本文所讲的这个组件,但我还是要搞出来。因为我真的好闲。

设计

要实现的功能

  1. 通过 type 属性使用指定的 svg 图标。
  2. size 属性传入 number 或者 string 都行,Element Plus 只支持 number,所以用的时候需要 v-bind:size="20" 这样写,或者用简写,但有时候还是会忘记加 v-bind,所以直接支持 size="20" 这样的字符串会更方便。
  3. type 属性支持首字母小写,Element Plus 使用的 svg 是大驼峰格式的,但有些短的单词有时候真的会忘记首字母大写。
  4. color 属性直接照搬回 Element Plus 的。

最终的使用方式

<e-icon type="Aim" :size="36" color="rgba(53, 131, 208, 0.5)" />

因为是二次封装,所以不能用回 <el-icon>,这是 Element Plus 的组件。

本次封装的目的是简化 icon 的使用方式,所以我把标签名也跟着简化了,变成 <e-icon>

缺点

打包出来的体积可能会大一丢丢。

开发

开发中涉及的技术点:

  1. 组件通讯
  2. 动态组件
  3. 全量引入 Element Plus 提供的 svg图标

本文的例子主要使用 props 的方式进行组件通讯。

如果你想了解更多 Vue3 的组件通讯方式,可以阅读 《Vue3 过10种组件通讯方式》

本例的代码比较简单,对应代码,跟着我的实现步骤来看。

以下是我的实现步骤:

  1. 全量引入 svg图标
  2. 引入 icon 样式
  3. 接收父组件传入的 sizecolortype
  4. size 也兼容字符串类型(Element Plus 只支持 number
  5. 图标名称首字母转大写
  6. 通过中括号的方式动态获取 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 全局注册该组件。

推荐阅读

👍《Element Plus 的 el-icon 到底怎么用?》

👍《Vue3 过10种组件通讯方式》

👍《Vue3 递归组件》

👍《Vite 搭建 Vue2 项目(Vue2 + vue-router + vuex)》

本例代码在这:e-icon

点赞 + 关注 + 收藏 = 学会了