CheckGroup 选择项组

Scan me!

无 UI 的抽象选择项基础组件, 可根据具体场景自定义样式. 1.5.0+

引入

  1. import {  CheckGroup } from 'mand-mobile'
  3. Vue.component(CheckGroup.name, CheckGroup)

代码演示

单选

  1. <template>
  2.   <div class="md-example-child md-example-child-single-component">
  3.     <md-check-group
  4.       v-model="selected"
  5.       :options="options"
  6.     >
  7.       <div slot-scope="{ option, select }" @click="select(option.value)">
  8.         label: {{option.label}}, disabled: {{!!option.disabled}}, isSelected: {{option.isSelected}}
  9.       </div>
  10.     </md-check-group>
  11.     </div>
  12. </template>
  14. <script>
  15. import {CheckGroup} from 'mand-mobile'
  17. export default {
  18.   name: 'check-group-demo',
  19.   title: '单选',
  20.   components: {
  21.     [CheckGroup.name]: CheckGroup,
  22.   },
  23.   data() {
  24.     return {
  25.       selected: '1',
  26.       options: [
  27.         {value: '1', label: '无UI'},
  28.         {value: '2', label: '禁用选项', disabled: true},
  29.         {value: '3', label: '点我啊'},
  30.         {value: '4', label: '点我啊'},
  31.         {value: '5', label: '点我啊'},
  32.         {value: '6', label: '点我啊'},
  33.       ],
  34.     }
  35.   },
  36. }
  38. </script>
  40. <style lang="stylus" scoped>
  41. .md-example-child
  42.   font-size 28px
  43. </style>
  44.  
  45.

至多3个

  1. <template>
  2.   <div class="md-example-child md-example-child-single-component">
  3.     <md-check-group
  4.       v-model="selected"
  5.       :options="options"
  6.       :max="3"
  7.     >
  8.       <div slot-scope="{ option, select }" @click="select(option.value)">
  9.         label: {{option.label}}, disabled: {{!!option.disabled}}, isSelected: {{option.isSelected}}
  10.       </div>
  11.     </md-check-group>
  12.     </div>
  13. </template>
  15. <script>
  16. import {CheckGroup} from 'mand-mobile'
  18. export default {
  19.   name: 'check-group-demo',
  20.   title: '至多3个',
  21.   components: {
  22.     [CheckGroup.name]: CheckGroup,
  23.   },
  24.   data() {
  25.     return {
  26.       selected: '1',
  27.       options: [
  28.         {value: '1', label: '选项一'},
  29.         {value: '2', label: '选项二', disabled: true},
  30.         {value: '3', label: '选项三'},
  31.         {value: '4', label: '选项四'},
  32.         {value: '5', label: '选项五'},
  33.         {value: '6', label: '选项六'},
  34.       ],
  35.     }
  36.   },
  37. }
  39. </script>
  41. <style lang="stylus" scoped>
  42. .md-example-child
  43.   font-size 28px
  44. </style>
  45.  
  46.

多选

  1. <template>
  2.   <div class="md-example-child md-example-child-single-component">
  3.     <md-check-group
  4.       v-model="selected"
  5.       :options="options"
  6.       :max="0"
  7.     >
  8.       <div slot-scope="{ option, select }" @click="select(option.value)">
  9.         label: {{option.label}}, disabled: {{!!option.disabled}}, isSelected: {{option.isSelected}}
  10.       </div>
  11.     </md-check-group>
  12.     </div>
  13. </template>
  15. <script>
  16. import {CheckGroup} from 'mand-mobile'
  18. export default {
  19.   name: 'check-group-demo',
  20.   title: '多选',
  21.   components: {
  22.     [CheckGroup.name]: CheckGroup,
  23.   },
  24.   data() {
  25.     return {
  26.       selected: '1',
  27.       options: [
  28.         {value: '1', label: '选项一'},
  29.         {value: '2', label: '选项二', disabled: true},
  30.         {value: '3', label: '选项三'},
  31.         {value: '4', label: '选项四'},
  32.         {value: '5', label: '选项五'},
  33.         {value: '6', label: '选项六'},
  34.       ],
  35.     }
  36.   },
  37. }
  39. </script>
  41. <style lang="stylus" scoped>
  42. .md-example-child
  43.   font-size 28px
  44. </style>
  45.  
  46.

API

CheckGroup Props

属性说明类型默认值备注
v-model选中的值[String,Array]-若为单选则用String, 若为多选则是Array
options选择项数组Array--
max最多选择几项Number1为1为单选,为0不限制数量,大于1则是限制至多选择数量
disabled是否禁用选择Booleanfalse-
options

选择项数组格式如下，其中value值必填, 其余为选填, 可添加自定义字段。

  1. [
  2.   { value: '', disabled: false }
  3. ]

CheckGroup Methods

select(value)
参数说明类型默认值
value即将新增的选中选项值[String, Array]-

CheckGroup Slots

CheckGroup的默认插槽将被作为列表项模板使用, 会暴露{option, select}给slot-scope使用。其中option在原有选项配置对象里新增了isSelected字段布尔值。

  1. <md-check-group
  2.   v-model="selected"
  3.   :options="options"
  4. >
  5.   <div slot-scope="{ option, select }" @click="select(option.value)">
  6.     ...
  7.   </div>
  8. </md-check-group>