本文主要是介绍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>这篇关于vue3显示element-plus所有icon的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
