给el-radio-button添加选中图片
时间: 2023-07-05 14:30:59 浏览: 473
你可以通过为`el-radio-button`元素设置自定义样式来添加选中图片。以下是一个示例代码:
```html
<template>
<el-radio-group v-model="selected">
<el-radio-button label="1" class="radio-button-with-image">
<img src="./selected.png" alt="selected" class="selected-image">
<span>Option 1</span>
</el-radio-button>
<el-radio-button label="2" class="radio-button-with-image">
<img src="./selected.png" alt="selected" class="selected-image">
<span>Option 2</span>
</el-radio-button>
</el-radio-group>
</template>
<style>
.radio-button-with-image .el-radio__label {
display: flex;
align-items: center;
}
.radio-button-with-image .selected-image {
width: 16px;
height: 16px;
margin-right: 8px;
/* 设置选中图片样式 */
}
.radio-button-with-image.is-active .selected-image {
filter: invert(1);
/* 设置选中状态下的图片样式 */
}
</style>
```
在这个例子中,我们首先在`el-radio-group`中使用了`v-model`来绑定选中的值。然后,我们为每个`el-radio-button`设置了一个自定义的类`radio-button-with-image`,并在其中嵌套了一个`<img>`元素和一个`<span>`元素。我们使用CSS样式来将`<img>`元素和`<span>`元素水平排列,并为`<img>`元素设置了一个默认的样式。最后,我们使用`.is-active`类选择器来设置选中状态下的样式,这样就可以在选中状态下改变选中图片的颜色。
注意,以上代码中的图片路径需要根据实际情况进行调整。
阅读全文