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

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

相关推荐
LEE16 小时前
前端转型全栈 00:AI 时代该学哪些,不该学哪些
前端·后端
晚安日记wanna17 小时前
SSR 为什么不适合登录态从水合冲突到缓存串号
前端·react.js·面试
aixingpan17 小时前
aixingpan.cn API开发文档:api_docs_bichart_natalvssolararc2接口指南
前端·php
无限压榨切图仔17 小时前
一个优惠券需求改了三端,我才明白全栈不是多学一门语言
前端·后端
晚安日记wanna17 小时前
批量请求失败只弹一个 Toast面试官想听五层
前端·面试·架构
晚安日记wanna17 小时前
TS const 类型参数一道面试题的四层追问
前端·面试·typescript
用户9210802628617 小时前
前端 Vue 专栏 09:Vue Router 与前端路由
前端
無限進步D17 小时前
Java Web 前端 简介
java·开发语言·前端·css·html·css3·web
码士集团小青17 小时前
从落地到“半停用“:qiankun 微前端在一个 Vue 3 + Vite 项目中的完整实践与反思
前端
the局外人18 小时前
掌控自己的 K 线数据:TradingView 本地部署与数据源接入
前端·vue.js·websocket