复选框 Checkbox

基本

<za-cell>
  <za-checkbox @change="handleChange">普通</za-checkbox>
</za-cell>
<za-cell>
  <za-checkbox checked @change="handleChange">选中</za-checkbox>
</za-cell>
<za-cell>
  <za-checkbox disabled>禁止</za-checkbox>
</za-cell>
<za-cell>
  <za-checkbox checked disabled>选中且禁止</za-checkbox>
</za-cell>

单列样式

<za-checkbox v-model="v5" @change="handleChange" type="cell">阅读并同意《XXX条款》中的相关规定</za-checkbox>

按钮样式

<za-cell>
  <za-checkbox-group v-model="checkboxGroup2" slot="description" type="button" @change="handleGroupChange">
    <za-checkbox v-for="(city, index) in cities" :value="city" :key="city"></za-checkbox>
  </za-checkbox-group>
  普通
</za-cell>
<za-cell>
  <za-checkbox-group v-model="checkboxGroup3" slot="description" type="button" @change="handleGroupChange">
    <za-checkbox v-for="city in cities" :value="city" :key="city"></za-checkbox>
  </za-checkbox-group>
  指定默认值
</za-cell>
<za-cell>
  <za-checkbox-group v-model="checkboxGroup4" slot="description" type="button" @change="handleGroupChange">
    <za-checkbox v-for="(city, index) in cities" :value="city" :key="city" :disabled="index === 2"></za-checkbox>
  </za-checkbox-group>
  禁用指定项
</za-cell>
<za-cell>
  <za-checkbox-group v-model="checkboxGroup5" slot="description" type="button" shape="rect" @change="handleGroupChange">
    <za-checkbox v-for="(city, index) in cities" :value="city" :key="city"></za-checkbox>
  </za-checkbox-group>
  直角
</za-cell>
<za-cell>
  <za-checkbox-group v-model="checkboxGroup6" slot="description" type="button" shape="round" @change="handleGroupChange">
    <za-checkbox v-for="(city, index) in cities" :value="city" :key="city"></za-checkbox>
  </za-checkbox-group>
  椭圆角
</za-cell>

块级样式

<div style="padding:10px;">
  <za-checkbox-group v-model="provice" type="button" block shape="radius" @change="handleGroupChange">
    <za-checkbox v-for="(city, index) in cities" :value="city" :key="city"></za-checkbox>
  </za-checkbox-group>
</div>

列表组样式

<za-checkbox-group v-model="checkboxGroup7" type="cell" @change="handleGroupChange">
  <za-checkbox v-for="(city, index) in cities" :value="city" :key="city" :disabled="index === 2"></za-checkbox>
</za-checkbox-group>

列表样式禁用状态

<za-checkbox-group v-model="checkboxGroup8" type="cell" disabled @change="handleGroupChange">
  <za-checkbox v-for="(city, index) in cities" :value="city" :key="city"></za-checkbox>
</za-checkbox-group>

Vue Script

<script name="vue">
export default {
  data() {
    return {
      v1: false,
      v2: true,
      v3: false,
      v4: true,
      v5: false,
      city: null,
      cities: ['上海', '北京', '广州', '深圳'],
      provice: [],
      provices: [{
        label: '条件A',
        checked: false,
        checkeds: []
      },{
        label: '条件B',
        checked: false,
        checkeds: []
      },{
        label: '条件C',
        checked: false,
        checkeds: []
      }],
      checkboxGroup: ['上海'],
      checkboxGroup2: [],
      checkboxGroup3: ['上海', '北京'],
      checkboxGroup4: [],
      checkboxGroup5: [],
      checkboxGroup6: [],
      checkboxGroup7: [],
      checkboxGroup8: [],
    }
  },
  methods: {
    handleChange(v, e) {
      console.log(v, e);
    },
    handleGroupChange(v, e){
      console.log(v, e);
    },
  },
};
</script>

API

Checkbox-Group Attributes

Checkbox Attributes

Checkbox Group Events

Checkbox Events