u-radio-group u-radio,选中颜色为红色
时间: 2024-09-27 21:12:28 浏览: 81
u-radio-group 和 u-radio 是 Ant Design Vue 中的组件,它们通常用于创建单选或多选列表。当你在 `u-radio-group` 组件中添加若干 `u-radio` 子元素,并通过绑定 `value` 属性指定默认选中的选项时,当选中某一项时,其外观样式会有所变化,比如边框或背景色。
如果你想让选中的 `u-radio` 具有红色高亮效果,你可以这样做:
1. 首先,在`<u-radio>`组件上设置一个`active-color`属性,将其值设为红色,如 `active-color="#FF0000"` 或者直接使用Ant Design Vue提供的颜色主题名,如`active-color="primary"`(红色),如果使用自定义颜色,则需要提供有效的颜色值。
```html
<u-radio :value="selectedOption" active-color="#FF0000">
选择项内容
</u-radio>
```
2. 然后,在对应的Vue组件中,你可以通过数据驱动控制选中状态,比如`selectedOption`变量表示当前选中的选项。
记得将`selectedOption`绑定到`v-model`上,这样点击时可以更新状态并改变颜色。
```html
<u-radio-group v-model="selectedOption">
<u-radio v-for="(item, index) in options" :key="index" :value="item.value">
{{ item.label }}
</u-radio>
</u-radio-group>
```
在这个例子中,`options`是一个包含`value`和`label`的对象数组,`selectedOption`会被自动更新成用户选择的值,使得对应项变红。
阅读全文