CheckBox 复选框

复选框. ^1.5.0+

引入

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

代码演示

样例一

<template>
  <div class="md-example-child">
    <md-check-box
      v-model="selected"
      :options="options"
      :max="2"
      :cols="4"
    >
    </md-check-box>
    </div>
</template>
<script>
import {CheckBox} from 'mand-mobile'
export default {
  name: 'check-box-demo',
  title: '样例一',
  describe: '',
  components: {
    [CheckBox.name]: CheckBox,
  },
  data() {
    return {
      selected: [],
      options: [
        {value: '1', label: '自己'},
        {value: '2', label: '配偶'},
        {value: '3', label: '父母'},
        {value: '4', label: '子女', disabled: true},
      ],
    }
  },
}
</script>
<style lang="stylus" scoped>
</style>
 
                

支付方式

<template>
  <div class="md-example-child">
    <md-check-box
      v-model="selected"
      :options="options"
    >
      <div slot="content" slot-scope="{ option }" class="payment-gateway">
        <p v-text="option.label"></p>
        <p class="muted" v-text="option.desc"></p>
      </div>
    </md-check-box>
    </div>
</template>
<script>
import {CheckBox} from 'mand-mobile'
export default {
  name: 'check-box-demo',
  title: '支付方式',
  describe: '',
  components: {
    [CheckBox.name]: CheckBox,
  },
  data() {
    return {
      selected: '',
      options: [{value: '1', label: '微信', desc: '减免1.2元'}, {value: '2', label: '支付宝', desc: '9.8折'}],
    }
  },
}
</script>
<style lang="stylus" scoped>
.payment-gateway
  text-align center
  font-size 0.32rem
.muted
  color #888
  font-size 0.24rem
</style>
 
                

API

CheckBox Props

options

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

[
  { value: '', disabled: false }
]

CheckBox Methods

select(value)