ElementPlus最新图标引⼊以及使⽤⽅法，icon动态组件，点击切换图标
最新版本的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-vueicon图标库
# 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]
appponent(iconName, item)
}
}
如果你使⽤的是ts，当数组下标为字符串时，会报错。，在**ElIconModules[iconName]**这⾥还会报错，解决⽅法是需要在
{
"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>
本⼈也是菜鸟，也是东拼西凑加上⾃⼰实践，希望能帮到各位吧，马上过年了，祝各位程序猿新年快乐，万事胜意~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。