vue3+element-plus 的icon
时间: 2025-04-27 07:52:48 浏览: 26
### 如何在 Vue3 和 Element Plus 中使用 Icon 图标组件及自定义图标
#### 自定义图标于 `el-rate` 组件中的应用
对于希望在 `el-rate` 组件中引入自定义图标的场景,可以利用该组件的 `icon-components` 属性来指定用于表示星星状态的 SVG 或者其他形式的图标组件。这允许开发者不仅仅局限于官方提供的图标集。
当创建一个自定义图标时,应当将其封装成一个可重用的 Vue 组件[^1]:
```html
<template>
<!-- 定义评分组件 -->
<div>
<el-rate v-model="value" :icon-components="customIcons"></el-rate>
</div>
</template>
<script setup>
import { ref } from 'vue';
// 假设这是两个自定义图标组件
import CustomStarIcon from './components/CustomStarIcon.vue'; // 自定义未选中星形图标
import CustomActiveStarIcon from './components/CustomActiveStarIcon.vue'; // 自定义已选中星形图标
const value = ref(0);
const customIcons = [
h(CustomStarIcon),
h(CustomActiveStarIcon)
];
</script>
```
上述代码展示了如何通过组合自定义图标与 `el-rate` 的方式实现个性化显示效果。这里的关键在于理解并正确配置 `icon-components` 参数,它接受的是由 VNode 构建函数组成的数组,分别对应着不同状态下要渲染的内容。
#### 动态绑定图标名称
除了静态设置外,在某些情况下可能还需要根据逻辑条件动态改变所使用的图标样式。此时可以通过 `<component>` 标签配合`:is`属性完成这一目标[^2]:
```html
<template>
<component class="xxx" :is="dynamicIconName"></component>
</template>
<script setup>
import { computed, defineComponent } from "vue";
export default defineComponent({
name: "DynamicIconExample",
props: {
type: String,
},
setup(props) {
const dynamicIconName = computed(() => `${props.type}-icon`);
return {
dynamicIconName,
};
}
});
</script>
```
此片段提供了一种方法论上的指导——即依据传入参数决定最终呈现的具体图标实例。这种方式不仅限于简单的字符串替换,还可以进一步扩展到更复杂的业务逻辑判断之中。
阅读全文
相关推荐


















