第一步:先建立DynamicIcon.vue
代码如下
<template>
<component
:is="iconComponent"
style="margin-right: 10px"
/>
</template>
<script setup>
import {
HomeOutlined, BarsOutlined, CalendarOutlined, ProjectOutlined, CaretDownOutlined, DownOutlined, UpOutlined, WechatOutlined, IdcardOutlined, PhoneOutlined,
SearchOutlined, FireOutlined, QuestionCircleOutlined, DoubleRightOutlined
} from '@ant-design/icons-vue';
const props = defineProps({
type: {
type: String,
required: true
}
});
const iconComponent = computed(() => {
switch (props.type) {
case 'HomeOutlined':
return HomeOutlined;
case 'BarsOutlined':
return BarsOutlined;
case 'CalendarOutlined':
return CalendarOutlined;
case 'ProjectOutlined':
return ProjectOutlined;
case 'CaretDownOutlined':
return CaretDownOutlined;
case 'DownOutlined':
return DownOutlined;
case 'UpOutlined':
return UpOutlined;
case 'wechat':
return WechatOutlined;
case 'idcard':
return IdcardOutlined;
case 'phone':
return PhoneOutlined;
case 'search':
return SearchOutlined;
case 'fire':
return FireOutlined;
case 'question':
return QuestionCircleOutlined;
case 'right':
return DoubleRightOutlined;
default:
return HomeOutlined;
}
});
</script>
其中component应该是vue的基础组件,is绑定动态的数据,只要右边是一个数据就行了,iconComponent在这就是数据,右边是一个函数,根据父组件传递的参数return不同的icon值
在别的页面运用时