【Radio & Checkbox】

已成功在 workorder/components 目录下创建单选和多选组件。

创建的组件

  1. Radio(单选框)

    • 支持 labelvaluecheckeddisabled 属性
    • 选中时显示蓝色圆形背景和白色圆点
    • 点击触发 inputchange 事件
  2. RadioGroup(单选组)

    • 支持 valuedirection(排列方向:column/row)属性
    • 通过 slot 包裹多个 Radio 组件
    • 统一管理选中状态
  3. Checkbox(多选框)

    • 支持 labelvaluecheckeddisabled 属性
    • 选中时显示蓝色方形背景和白色勾选标记
    • 点击触发 inputchange 事件
  4. 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>

组件样式符合项目的蓝色主题设计风格,包含渐变效果和流畅的过渡动画。

相关推荐
人民广场吃泡面1 小时前
前端该重视的编程思想
前端
冬夜戏雪1 小时前
agent的trace 和eval
开发语言·前端·javascript
IT_陈寒1 小时前
Redis的DEL命令居然没删干净数据?这个坑我爬了半天
前端·人工智能·后端
kyriewen1 小时前
面试官让我现场用 AI 改一个真实 bug——他打断我的 3 个理由
前端·面试·ai编程
计算机魔术师2 小时前
斯坦福研究:AI 对入门级岗位冲击最大
前端
感谢一路走过的人2 小时前
AGGrid刷新数据后执行筛选
javascript·ag-grid
水獭比特2 小时前
工具都批准了,为什么还不能执行?给 Agent 补上第二道校验
javascript·人工智能·node.js
Simon_He3 小时前
一个渲染内核,五个框架包:我的流式 Markdown 渲染库是怎么长成“全家桶”的
前端·vue.js·markdown
小满zs3 小时前
关于HBuilderX+ 微信小程序开发工具启动的问题
前端·uni-app