已成功在 workorder/components 目录下创建单选和多选组件。
创建的组件:
-
Radio(单选框):
- 支持
label、value、checked、disabled属性 - 选中时显示蓝色圆形背景和白色圆点
- 点击触发
input和change事件
- 支持
-
RadioGroup(单选组):
- 支持
value和direction(排列方向:column/row)属性 - 通过 slot 包裹多个 Radio 组件
- 统一管理选中状态
- 支持
-
Checkbox(多选框):
- 支持
label、value、checked、disabled属性 - 选中时显示蓝色方形背景和白色勾选标记
- 点击触发
input和change事件
- 支持
-
CheckboxGroup(多选组):
- 支持
value(数组)和direction属性 - 通过 slot 包裹多个 Checkbox 组件
- 统一管理多选状态
- 支持
使用示例:
vue
<!-- 单选 -->
<RadioGroup v-model="radioValue">
<Radio label="选项一" :value="1" />
<Radio label="选项二" :value="2" />
</RadioGroup>
<!-- 多选 -->
<CheckboxGroup v-model="checkboxValue">
<Checkbox label="选项一" :value="1" />
<Checkbox label="选项二" :value="2" />
</CheckboxGroup>
组件样式符合项目的蓝色主题设计风格,包含渐变效果和流畅的过渡动画。