vue3显示element-plus所有icon

本文主要是介绍vue3显示element-plus所有icon，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果

在这里插入图片描述

代码

<template><div style="display: flex;flex-wrap: wrap"><component :is="name" style="width: 2rem; margin-left: 2rem" v-for="(name,index) in icons" :index="index" :key="index"></component></div>
</template><script>
import * as ElIcons from '@element-plus/icons'
import {reactive, ref, toRefs} from "vue";export default {components: {...ElIcons},name: "Naruto-Icon.vue",setup() {const getData = () => {let icons = []for (const name in ElIcons) {icons.push(name)}return icons}const iconList = reactive({icons: getData()})return {...toRefs(iconList)}}
}
</script><style scoped></style>

延申

封装成复用组件。

效果

在这里插入图片描述

组件代码

<template><el-input @click="dialogVisible = true" v-model="currentIconName"></el-input><el-dialogv-model="dialogVisible"title="请选择图标"width="80%":before-close="handleClose"@open="beforeOpen"><div style="display: flex;flex-wrap: wrap"><div v-for="(name,index) in icons" :index="index" :key="index" style="cursor: pointer;padding: 1rem":class="currentIconName === name ? 'red' : ''"@click="currentIconName = name"><component :is="name" style="width: 2rem;height: 2rem"></component></div></div><template #footer><span class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="handleOk">确定</el-button></span></template></el-dialog></template><script>
import * as ElIcons from '@element-plus/icons'
import {reactive, ref, toRefs, watch} from "vue";export default {components: {...ElIcons},name: "Naruto-Icon.vue",emits: ['update:iconName'],props: {iconName: {type: String}},setup(props, context) {const getData = () => {let icons = []for (const name in ElIcons) {icons.push(name)}return icons}const handleClose = () => {iconList.dialogVisible = false;}const beforeOpen = () => {}const handleOk = () => {context.emit(`update:iconName`, iconList.currentIconName);handleClose();}const iconList = reactive({icons: getData(),dialogVisible: false,currentIconName: 'Aim'})watch(() => props.iconName,(val) => {iconList.currentIconName = val;})return {...toRefs(iconList),handleClose,beforeOpen,handleOk}}
}
</script><style scoped lang="less">
.red{background-color: palevioletred;color: white;
}
</style>