如何在el-radio-button组件中添加图标?
时间: 2024-10-25 07:04:20 浏览: 37
在Element UI的`el-radio-button`组件中,如果你想添加图标,你可以结合使用`<el-radio>`和自定义的`<i>`标签。这里是一个基本的例子:
```html
<template>
<el-radio-group v-model="radioValue">
<el-radio
label="option1"
:class="{ 'has-icon': true }"> <!-- 添加一个 class 名称 "has-icon" 来标记有图标的 radio -->
<i slot="append" class="iconfont icon-you-need-to-replace-with-your-font-class"></i> <!-- 插入图标,替换 "iconfont" 为你的字体图标库的类名 -->
Option 1
</el-radio>
<el-radio
label="option2"
>Option 2</el-radio>
</el-radio-group>
</template>
<script>
export default {
data() {
return {
radioValue: ''
};
}
};
</script>
```
在这个例子中,当`el-radio`被选中时,`.has-icon`这个类会使图标显示出来。你需要确保你已经在CSS中定义了`.has-icon`类下的图标样式。
阅读全文