复选 (bui-checkbox)

复选(bui-checkbox) - 图1   复选(bui-checkbox) - 图2

用法

  1. <bui-checkbox v-model="selectedValue" @change="changeValue"  direction="vertical" :items="items"></bui-checkbox>
  2. <bui-checkbox-list v-model="selectedValue" @change="changeValue" :items="items"></bui-checkbox-list>
  1. data () {
  2.     return {
  3.         selectedValue:["1","2"],
  4.         items:[
  5.             {value:"1",title:'全部'},
  6.             {value:"2",title:'选项一'},
  7.             {value:"3",title:'选项二'},
  8.             {value:"4",title:'选项三'}
  9.         ]
  10.     }
  11. },
  12. methods: {
  13.     changeValue(value){
  14.         this.$toast(JSON.stringify(value));
  15.     }
  16. }

Example: bui-checkbox

属性

Prop Type Required Default Description
value array Y 可使用v-model双向绑定数据
items array Y 数据项
direction string N horizontal 方向: horizontal vertical
fontSize number N 48 大小
iconSize number N 32 大小
selectedColor string N #00cc66 颜色
unSelectedColor string N #9ea7b4 颜色

items: 赋值单选组数据列表，传一个数组，单个数组的属性如下：

  • value ：单选项值
  • title ：单选项文本
  • disabled ：表明是否激活按钮, true为激活、false为不激活、默认值为false

事件

  • @change ：选中时触发的事件，返回选中的value，它是一个数组