Checkbox

一组备选项中进行多选。Demo

引入

import { Checkbox, CheckboxList } from 'vue-pmui';
// 全局使用
Vue.component(Checkbox.name, Checkbox);
Vue.component(CheckboxList.name, CheckboxList);

// 或者
Vue.use(Checkbox);
Vue.use(CheckboxList);

例子

export default {
  data() {
    return {
      options: [
        { label: '士多啤梨', value: 'strawberry' },
        { label: '苹果 disabled', value: 'apple', disabled: true },
        { label: '橙', value: 'orange' }
      ],
      value: ['apple'],
      value2: 'on',
      value3: false,
      value4: []
    };
  }
};

CheckboxList

<pm-checkbox-list v-model="value" :options="options"/>

CheckboxList - 左对齐

<pm-checkbox-list align="left" v-model="value" :options="options"/>

单独使用

<pm-checkbox label="strawberry" v-model="value"> 士多啤梨 </pm-checkbox>
<pm-checkbox label="apple" v-model="value" disabled> 苹果 </pm-checkbox>
<pm-checkbox label="orange" v-model="value"> 橙 </pm-checkbox>

开关

<pm-checkbox true-label="on"
             false-label="off"
             v-model="value2">
  全选
</pm-checkbox>

Props

Checkbox

参数 说明 类型 可选值 默认值
label 选中值(多选有效) Boolean/Number/String/Object ''
true-label 选中值(单独作为开关时有效) Boolean/Number/String/Object true
false-label 未选中值(单独作为开关时有效) Boolean/Number/String/Object false
disabled 是否禁用 Boolean false

CheckboxList

参数 说明 类型 可选值 默认值
align 布局 String left/right 'right'
options 选项数组 Array []

CheckboxList - options

参数 说明 类型 可选值 默认值
label 选项标题 String
value 选项值 Boolean/Number/String/Object ''
disabled 是否禁用 Boolean false

Slots

Checkbox

Name 描述
default 选项标题

Events

事件名 说明 回调参数
change 绑定值变化时触发 newValue, oldValue

results matching ""

    No results matching ""