checkbox选中和不选中 jqu_使用Vue3.0新特性造轮子 WidgetUI3.0 (Checkbox复选框组件)...

"title"标题

ed7543ed78ea851111be781bebe7c877.png

示例代码:

data = [  {    title: '新日小卫士二代',  },  {    title: '车子质量不合格',  },  {    title: '我买的骑士1号仪表台进水怎么回事?',  },  {    title: '风雅欧妮大灯高低调节',  }]

"title"标题和"desc"描述

2e5468e75e277688a962a7e23f5fef85.png

示例代码:

data= [  {    title: '新日小卫士二代',    desc: '京东购新日小卫士二代一辆,收货后就发现后轮毂变形!公司厂承诺全图联保,官网查得邯郸市有很多保修点,实际一个都不存在!'  },  {    title: '车子质量不合格',    desc: '刚买的电车,发现车把有些不对称,店家车子装上电瓶就想给换,找个维修师傅简单调了下,今天家人骑车发现车把还是有些斜!车子不合格怎能出厂出售?以后不'  },  {    title: '我买的骑士1号仪表台进水怎么回事?',    desc: '刚买的骑士1号,在外面淋了一会雨,发现里面进水了,第二天打电话给销售商,回复说正常,没关系。我觉得这算正常吗?再普通的电动车仪表台也不会进水。'  },  {    title: '风雅欧妮大灯高低调节',    desc: '哪位大神能不能告诉一下风雅欧妮大灯怎么调节'  }]

"disable" 禁用

a96cf8be5a17ec7cc942806adeddf037.png

示例代码:

data = [  {    title: '新日小卫士二代',    disable: true  },  {    title: '车子质量不合格',    disable: true  },  {    title: '我买的骑士1号仪表台进水怎么回事?',  },  {    title: '风雅欧妮大灯高低调节',  }]

"reverse" 反向

d77d9b40c637a8f3b1e2d410642552d7.png

示例代码:

data = [  {    title: '新日小卫士二代',    disable: true  },  {    title: '车子质量不合格',    disable: true  },  {    title: '我买的骑士1号仪表台进水怎么回事?',  },  {    title: '风雅欧妮大灯高低调节',  }]

"selectedColor" 自定义选中颜色

5b0dc0c197789a3b14027044606d08c2.png

示例代码:

data =[  {    title: '新日小卫士二代',  },  {    title: '车子质量不合格',  },  {    title: '我买的骑士1号仪表台进水怎么回事?',  },  {    title: '风雅欧妮大灯高低调节',  }]

"selected" 默认选中

9f6f395664d83088c10b260916b80833.png

示例代码:

data =[  {    title: '新日小卫士二代',    selected: true  },  {    title: '车子质量不合格',    selected: true  },  {    title: '我买的骑士1号仪表台进水怎么回事?',  },  {    title: '风雅欧妮大灯高低调节',  }]

Checkbox组件接收props参数:

dataSource: { (类型 Array)

设置数据源

reverse: { (类型 Boolean)

默认值 false

布局是否反向

selectedColor: { (类型 String)

默认值 "#1bb5f1"

设置选中颜色

change事件:

点击时触发

返回已选中的数据

具体的Checkbox组件源码,请前往github地址获取。

https://github.com/AntJavascript/WidgetUI3.0/blob/master/Checkbox.vue

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
非常抱歉,我的回答仍然有误。vform2 的 form-widget 文件夹确实包含了一个名为 field-widget 的子文件夹,该子文件夹中包含了用于支持表单设计器的一些控件组件。而且,我之前提到的 checkbox.vue 文件在 vform2 中被替换为了 checkbox-widget.vue 文件。 下面是 field-widget 文件夹中的文件和文件夹的简要说明: 1. **checkbox-widget.vue**:该文件是一个复选框控件组件,用于支持表单中的复选框输入。它包括了复选框的选项、默认值、禁用状态等属性。 2. **date-picker-widget.vue**:该文件是一个日期选择器控件组件,用于支持表单中的日期输入。它包括了日期格式、默认值、最小日期、最大日期等属性。 3. **file-upload-widget.vue**:该文件是一个文件上传控件组件,用于支持表单中的文件上传。它包括了文件类型、文件大小限制、上传进度等属性。 4. **input-widget.vue**:该文件是一个文本框控件组件,用于支持表单中的文本输入。它包括了输入框类型、默认值、最大长度、禁用状态等属性。 5. **radio-widget.vue**:该文件是一个单选框控件组件,用于支持表单中的单选框输入。它包括了单选框选项、默认值、禁用状态等属性。 6. **select-widget.vue**:该文件是一个下拉框控件组件,用于支持表单中的下拉框输入。它包括了下拉框选项、默认值、禁用状态等属性。 7. **text-area-widget.vue**:该文件是一个文本域控件组件,用于支持表单中的多行文本输入。它包括了默认值、最大长度、禁用状态等属性。 总之,vform2 的 form-widget 文件夹中的 field-widget 子文件夹包含了一些表单控件组件,这些组件用于支持表单设计器中的表单控件定义,可以满足各种表单输入需求。开发者可以根据需要进行定制和扩展,从而实现自定义的表单控件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值