Checklist 按钮组

import { Checklist } from 'feui';
components: {
  [Checklist.name]: Checklist
},
data () {
  return {
    checklist001: [],
    commonList: [ '安徽', '浙江', '北京' ],
    checklist002: [ '安徽', '浙江' ],
    checklist003: [ '安徽', '浙江' ],
    checklist005: [ '01', '02', '03' ],
    objectList: [{key: '1', value: '001 value'}, {key: '2', value: '002 value'}, {key: '3', value: '003 value'}],
    objectListValue: ['1', '2'],
    inlineDescList: [
      {key: '1', value: 'Tiger is good', inlineDesc: 'Tiger is the king of mountain'},
      {key: '2', value: 'Lion is better', inlineDesc: 'Lion is the king of woods'},
      {key: '3', value: 'Camel is best, no inline-desc'}
    ],
    inlineDescListValue: [1],
    asyncList: [],
    asyncListValue: [],
    radioValue: ['安徽']
  }
},
methods:{
  change (val) {
    console.log('change', val)
  }
}

代码演示

基础用法

<fe-checklist title="基础用法" 
  :label-position="labelPosition" 
  required :options="commonList" 
  v-model="checklist001" 
  @on-change="change">
</fe-checklist>

禁用操作

<fe-checklist title="默认选中 安徽 和 浙江 (禁用操作)" 
  disabled label-position="left" 
  :options="commonList" 
  v-model="checklist002" @on-change="change">
</fe-checklist>

最多选2个

<fe-checklist title="最多选2个" 
  :options="commonList" v-model="checklist003" 
  :max=2 @on-change="change">
</fe-checklist>

单选模式

<fe-checklist title="只能选一个(单选模式)" 
  :options="commonList" 
  v-model="radioValue" 
  :max="1" @on-change="change">
</fe-checklist>

乱序模式

<fe-checklist title="打乱选项顺序" 
  random-order :options="checklist005" 
  v-model="checklist005Value" 
  @on-change="change">
</fe-checklist>

Object 类型的选项列表

<fe-checklist ref="demoObject" 
  itle="使用 Object 类型的选项列表，key 必须为字符串" 
  :options="objectList" v-model="objectListValue" 
  @on-change="change">
</fe-checklist>

包含 inlineDesc 属性的 Object 类型选项列表

<fe-checklist title="包含 inlineDesc 属性的 Object 类型选项列表" 
  :options="inlineDescList" v-model="inlineDescListValue" 
  @on-change="change">
</fe-checklist>

异步选项列表

<fe-checklist title="异步选项列表" :max="3" 
  :options="asyncList" v-model="asyncListValue" 
  @on-change="change">
</fe-checklist>

API

Events

Methods