CheckBox 复选框

Scan me!

复选框. 1.5.0+

引入

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

代码演示

样例一

  1. <template>
  2. <div class="md-example-child">
  3. <md-check-box
  4. v-model="selected"
  5. :options="options"
  6. :max="2"
  7. :cols="4"
  8. >
  9. </md-check-box>
  10. </div>
  11. </template>
  12. <script>
  13. import {CheckBox} from 'mand-mobile'
  14. export default {
  15. name: 'check-box-demo',
  16. title: '样例一',
  17. describe: '',
  18. components: {
  19. [CheckBox.name]: CheckBox,
  20. },
  21. data() {
  22. return {
  23. selected: [],
  24. options: [
  25. {value: '1', label: '自己'},
  26. {value: '2', label: '配偶'},
  27. {value: '3', label: '父母'},
  28. {value: '4', label: '子女', disabled: true},
  29. ],
  30. }
  31. },
  32. }
  33. </script>
  34. <style lang="stylus" scoped>
  35. </style>
  36.  

支付方式

  1. <template>
  2. <div class="md-example-child">
  3. <md-check-box
  4. v-model="selected"
  5. :options="options"
  6. >
  7. <div slot="content" slot-scope="{ option }" class="payment-gateway">
  8. <p v-text="option.label"></p>
  9. <p class="muted" v-text="option.desc"></p>
  10. </div>
  11. </md-check-box>
  12. </div>
  13. </template>
  14. <script>
  15. import {CheckBox} from 'mand-mobile'
  16. export default {
  17. name: 'check-box-demo',
  18. title: '支付方式',
  19. describe: '',
  20. components: {
  21. [CheckBox.name]: CheckBox,
  22. },
  23. data() {
  24. return {
  25. selected: '',
  26. options: [{value: '1', label: '微信', desc: '减免1.2元'}, {value: '2', label: '支付宝', desc: '9.8折'}],
  27. }
  28. },
  29. }
  30. </script>
  31. <style lang="stylus" scoped>
  32. .payment-gateway
  33. text-align center
  34. font-size 0.32rem
  35. .muted
  36. color #888
  37. font-size 0.24rem
  38. </style>
  39.  

API

CheckBox Props

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

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

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

CheckBox Methods

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