1. 基本用法:
<Radio label="选项1" v-model="radioValue" />
<Radio label="选项2" v-model="radioValue" />
在上述例子中,v-model 用于绑定选中状态,radioValue 是在 data 中定义的变量。
2. 禁用状态:
<Radio label="选项1" v-model="radioValue" disabled />
<Radio label="选项2" v-model="radioValue" disabled />
添加 disabled 属性可以禁用单选框。
3. 按钮样式:
<Radio label="选项1" v-model="radioValue" border />
<Radio label="选项2" v-model="radioValue" border />
使用 border 属性可以使单选框呈现按钮样式。
4. 按钮组:
<Radio.Group v-model="radioValue">
<Radio label="选项1" />
<Radio label="选项2" />
<Radio label="选项3" />
</Radio.Group>
使用 Radio.Group 包裹多个 Radio 可以创建一个单选按钮组。
5. 自定义颜色:
<Radio label="选项1" v-model="radioValue" style="color: #409EFF;" />
<Radio label="选项2" v-model="radioValue" style="color: #67C23A;" />
通过添加 style 属性可以自定义单选框的颜色。
6. 垂直布局:
<Radio.Group v-model="radioValue" vertical>
<Radio label="选项1" />
<Radio label="选项2" />
<Radio label="选项3" />
</Radio.Group>
使用 vertical 属性可以实现垂直布局的单选按钮组。
以上是一些常见的 Element-React Radio 组件的用法示例。你可以根据具体需求在项目中使用它们,并根据 Element-React 文档进行详细配置和使用说明。
转载请注明出处:http://www.pingtaimeng.com/article/detail/5598/Element-React