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
属性 | 说明 | 类型 | 默认值 | 备注 |
---|---|---|---|---|
v-model | 选中的值 | [String,Array] | - | 若为单选则用String , 若为多选则是Array |
options | 选择项数组 | Array | - | - |
max | 最多选择几项 | Number | 1 | 为1为单选,为0不限制数量,大于1则是限制至多选择数量 |
disabled | 是否禁用选择 | Boolean | false | - |
cols | 每行显示几列选项框 | Number | 0 | 默认0 是无限制 |
options
选择项数组格式如下,其中value
值必填, 其余为选填, 可添加自定义字段。
[
{ value: '', disabled: false }
]
CheckBox Methods
select(value)
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
value | 即将新增的选中选项值 | [String, Array] | - |