在 Element-React 中,Radio 组件用于创建单选框。以下是一些常用的 Element-React Radio 组件的用法示例:

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