el-radio-group的勾选是圆形的,改成对勾形状
时间: 2024-02-20 11:59:56 浏览: 20
可以通过修改el-radio-group的样式来实现勾选为对勾形状。具体方法是:
1. 首先,在el-radio-group所在的组件或页面中,添加下面的CSS样式:
```css
.el-radio__inner::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
background-color: #409EFF;
transition: all .2s;
}
.el-radio__input.is-checked .el-radio__inner::after {
transform: translate(-50%, -50%) scale(1);
}
```
2. 上述样式中,`.el-radio__inner::after`是勾选的对勾样式,`.el-radio__input.is-checked .el-radio__inner::after`是选中状态下的样式。
3. 保存样式后,重新渲染页面,就会看到勾选变成了对勾形状。
注意:这种方式只是通过修改样式来实现勾选为对勾形状,不会影响el-radio-group的单选功能。
相关问题
el-radio的勾选样式改成对勾
可以通过设置 `el-radio` 组件的 `checked-icon` 属性来将勾选样式改成对勾。示例代码如下:
```html
<template>
<el-radio
v-model="radio"
:label="3"
checked-icon="el-icon-circle-check"
>
Radio
</el-radio>
</template>
```
在上面的代码中,`checked-icon` 属性设置为 `el-icon-circle-check`,表示使用 element-ui 中的对勾图标。你也可以使用其他的图标库中的对勾图标。
van-radio 同心圆
van-radio是一个基于Vue.js的单选框组件,它可以用来实现同心圆的效果。同心圆是指多个圆心在同一点的圆,可以通过设置不同的半径和颜色来实现层次感。在van-radio中,可以通过设置不同的样式来实现同心圆的效果,比如设置不同的背景色、边框、对勾样式等。同时,van-radio也支持自定义样式,可以根据UI需求自己修改样式。