【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>

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

相关推荐
lichenyang4533 小时前
Docker 学习笔记(一):为什么需要镜像、容器和仓库?
前端
kyriewen3 小时前
别再对着 TypeScript 报错发呆了:我把 10 个最常见的红色波浪线翻译成了人话
前端·javascript·typescript
IT_陈寒3 小时前
SpringBoot自动配置的坑,我的API突然就404了
前端·人工智能·后端
free354 小时前
从 0 实现一个 Tiny JavaScript VM:项目架构拆解
javascript
暴走的小呆4 小时前
Vue 2 中 Object 的变化侦测:从 getter/setter 到 Dep、Watcher、Observer
vue.js
奇奇怪怪的4 小时前
Embedding 模型 10+ 横向评测
前端
陈广亮4 小时前
Monorepo 从 0 到 1 实操指南 2026 版:pnpm catalogs + Turborepo 2.x + changesets 全链路
前端
子兮曰4 小时前
OpenMontage 深度解剖:你的 AI 编程助手,其实是个视频工作室
前端·后端·ai编程
敲代码的鱼4 小时前
PDF 预览与签名批注写回 支持安卓 iOS 鸿蒙 UTS插件
android·前端·ios
英勇无比的消炎药4 小时前
TinyVue v-auto-tip: 文本超长自动提示的优雅方案
vue.js