elementplus 图标 elementplus图标根据男女变换

最新版本的Element Plus已经移除了Font icon，以下引入以及使用方法为亲测可用的，但是不知道后续是否还会改变，大家可以借鉴一下。

本人使用版本

“element-plus”: “^1.3.0-beta.1”,

“@element-plus/icons-vue”: “^0.2.6”,

“typescript”: “~4.1.5”

1.安装

# Choose a package manager you like.

# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue

2.使用

基本使用方法官方文档写的很清楚，不再赘述，以下只做动态组件使用说明

需要在main.ts中统一导入

import * as ElIconModules from '@element-plus/icons-vue'

// 统一注册Icon图标
for (const iconName in ElIconModules) {
  if (Reflect.has(ElIconModules, iconName)) {
    const item = ElIconModules[iconName]
    app.component(iconName, item)
  }
}

如果你使用的是ts，当数组下标为字符串时，会报错。，在**ElIconModules[iconName]**这里还会报错，解决方法是需要在ts.config.json中加入以下代码，看注释处

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": ["webpack-env"],
    "paths": {
      "@/*": ["src/*"]
    },
    "suppressImplicitAnyIndexErrors": true, //加入这段代码解决main.ts报错问题
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": ["node_modules"]
}

完成以上即可完成全局的图标注册

3.动态组件使用方法

<el-icon :size="30">
      <component
        class="fold-menu"
        :is="iconName"
        @click="handleFoldClick"
      ></component>
    </el-icon>

在写项目时有一个需求是点击图标要进行图标切换，以往都是使用动态class的方式，但是现在因为Element Plus移除了iconfont，所以需要使用动态组件，下面上完整代码，一看便知，直接复制也可实现

<template>
  <div class="nav-header">
    <el-icon :size="30">
      <component
        class="fold-menu"
        :is="iconName"
        @click="handleFoldClick"
      ></component>
    </el-icon>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  emits: ['foldChange'], //子传父
  setup(props, { emit }) {
    let iconName = ref('Fold')
    const isFold = ref(false)
    // 这里是点击图标可以进行切换，自己想的实现方法，可能不太好，但是功能实现了
    const handleFoldClick = () => {
      isFold.value = !isFold.value
      if (isFold.value == false) {
        iconName.value = 'Expand'
      } else {
        iconName.value = 'Fold'
      }
      emit('foldChange', isFold.value)
    }
    return {
      iconName,
      handleFoldClick,
      isFold
    }
  }
})
</script>

<style scoped lang="less">
.fold-menu {
  cursor: pointer;
}
</style>

本人也是菜鸟，也是东拼西凑加上自己实践，希望能帮到各位吧，马上过年了，祝各位程序猿新年快乐，万事胜意~

总结

写到这里也结束了，在文章最后放上一个小小的福利，以下为小编自己在学习过程中整理出的一个关于 前端开发 的学习思路及方向。从事互联网开发，最主要的是要学好技术，而学习技术是一条慢长而艰苦的道路，不能靠一时激情，也不是熬几天几夜就能学好的，必须养成平时努力学习的习惯，更加需要准确的学习方向达到有效的学习效果。