<template>
  <div class="page-checklist">
    <co-header fixed title="Checklist">
      <fallback slot="left"></fallback>
    </co-header>
    <div class="co-wrapper">
      <co-checklist
        title="基本用法"
        v-model="value"
        :options="['选项A', '选项B', '选项C']">
      </co-checklist>
      <co-checklist
        title="设置禁用选项"
        v-model="value1"
        :options="options">
      </co-checklist>
      <co-checklist
        title="设置最大可选数"
        :max="2"
        v-model="value2"
        :options="options">
      </co-checklist>
      <co-checklist
        title="选择框右对齐"
        align="right"
        v-model="value"
        :options="options">
      </co-checklist>
    </div>
  </div>
</template>

<script type="es6">
export default {
  name: 'page-checklist',
  data() {
    return {
      value: [],
      value1: [],
      value2: [],
      value3: [],
      options: [
        {
          label: '被禁用',
          value: '值F',
          disabled: true
        },
        {
          label: '选中禁用',
          value: '选中禁用的值',
          disabled: true
        },
        {
          label: '选项A',
          value: '值A'
        },
        {
          label: '选项B',
          value: '值B'
        }
      ]
    };
  }
};
</script>
