007_ checkbox

1. Checkbox Checkbox

1.1. Make multiple choices from a set of alternatives .

1.2. Checkbox attribute

Parameters	explain	type	Optional value	The default value is
value / v-model	Binding value	string / number / boolean	nothing	nothing
label	The value of the selected state ( Only in checkbox-group Or the binding object type is array Effective when )	string / number / boolean	nothing	nothing
true-label	Selected value	string / number	nothing	nothing
false-label	No selected value	string / number	nothing	nothing
disabled	Whether to disable	boolean	nothing	false
border	Show border or not	boolean	nothing	false
size	Checkbox The size of the , Only in border It works when it's true	string	medium / small / mini	nothing
name	Native name attribute	string	nothing	nothing
checked	Whether to check	boolean	nothing	false
indeterminate	Set up indeterminate state , Only responsible for style control	boolean	nothing	false

1.3. Checkbox event

Event name	explain	Callback Arguments
change	Event triggered when the binding value changes	Updated value

1.4. Checkbox-group attribute

Parameters	explain	type	Optional value	The default value is
value / v-model	Binding value	array	nothing	nothing
size	Multiple selection box group size , Only for buttons Checkbox Or with a border Checkbox It works	string	medium / small / mini	nothing
disabled	Whether to disable	boolean	nothing	false
min	Can be checked checkbox Minimum number of	number	nothing	nothing
max	Can be checked checkbox Maximum number of	number	nothing	nothing
text-color	In the form of buttons Checkbox Text color when activated	string	nothing	#ffffff
fill	In the form of buttons Checkbox Fill color and border color when active	string	nothing	#409EFF

1.5. Checkbox-group event

Event name	explain	Callback Arguments
change	Event triggered when the binding value changes	Updated value

1.6. Checkbox-button attribute

Parameters	explain	type	Optional value	The default value is
label	The value of the selected state ( Only in checkbox-group Or the binding object type is array Effective when )	string / number / boolean	nothing	nothing
true-label	Selected value	string / number	nothing	nothing
false-label	No selected value	string / number	nothing	nothing
disabled	Whether to disable	boolean	nothing	false
name	Native name attribute	string	nothing	nothing
checked	Whether to check	boolean	nothing	false

2. Checkbox Multiple selection box example

2.1. Use the scaffold to create a new one named element-ui-checkbox Front end projects , At the same time to install Element plug-in unit .

2.2. To write App.vue 

<template>
  <div id="app">
    <h1> Basic usage </h1>
    <el-checkbox v-model="base_checkbox"> Options </el-checkbox>

    <h1> Disabled state </h1>
    <el-checkbox v-model="disabled_checkbox1" disabled> Options 1</el-checkbox>
    <el-checkbox v-model="disabled_checkbox2" disabled> Options 2</el-checkbox>

    <h1> Multi box group </h1>
    <el-checkbox-group v-model="group_checkbox">
      <el-checkbox label=" Check box  A"></el-checkbox>
      <el-checkbox label=" Check box  B"></el-checkbox>
      <el-checkbox label=" Check box  C"></el-checkbox>
      <el-checkbox label=" Ban " disabled></el-checkbox>
      <el-checkbox label=" Check and disable " disabled></el-checkbox>
    </el-checkbox-group>

    <h1>indeterminate state </h1>
    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"> Future generations </el-checkbox>
    <div style="margin: 15px 0;"></div>
    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
      <el-checkbox v-for="city in cities" :label="city" :key="city">{
   {city}}</el-checkbox>
    </el-checkbox-group>

    <h1> Limitation on the number of optional items </h1>
    <el-checkbox-group v-model="selectable_checkedCities" :min="1" :max="2">
      <el-checkbox v-for="city in selectable_cities" :label="city" :key="city">{
   {city}}</el-checkbox>
    </el-checkbox-group>

    <h1> Button style </h1>
    <div>
      <el-checkbox-group v-model="button_checkbox_group1">
        <el-checkbox-button v-for="city in cities" :label="city" :key="city">{
   {city}}</el-checkbox-button>
      </el-checkbox-group>
    </div>
    <div style="margin-top: 20px">
      <el-checkbox-group v-model="button_checkbox_group2" size="medium">
        <el-checkbox-button v-for="city in cities" :label="city" :key="city">{
   {city}}</el-checkbox-button>
      </el-checkbox-group>
    </div>
    <div style="margin-top: 20px">
      <el-checkbox-group v-model="button_checkbox_group3" size="small">
        <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === ' Beijing '" :key="city">{
   {city}}</el-checkbox-button>
      </el-checkbox-group>
    </div>
    <div style="margin-top: 20px">
      <el-checkbox-group v-model="button_checkbox_group4" size="mini" disabled>
        <el-checkbox-button v-for="city in cities" :label="city" :key="city">{
   {city}}</el-checkbox-button>
      </el-checkbox-group>
    </div>

    <h1> With borders </h1>
    <el-checkbox v-model="border_checked1" border> Options 1</el-checkbox>
    <el-checkbox v-model="border_checked2" border> Options 2</el-checkbox>
  </div>
</template>

<script>
const cityOptions = [' Shanghai ', ' Beijing ', ' Guangzhou ', ' Shenzhen ']
export default {
  data () {
    return {
      base_checkbox: true,
      disabled_checkbox1: false,
      disabled_checkbox2: true,
      group_checkbox: [' Check and disable ', ' Check box  A'],
      checkAll: false,
      checkedCities: [' Shanghai ', ' Beijing '],
      cities: cityOptions,
      isIndeterminate: true,
      selectable_checkedCities: [' Shanghai ', ' Beijing '],
      selectable_cities: cityOptions,
      button_checkbox_group1: [' Shanghai '],
      button_checkbox_group2: [' Beijing '],
      button_checkbox_group3: [' Guangzhou '],
      button_checkbox_group4: [' Shenzhen '],
      border_checked1: true,
      border_checked2: false
    }
  },
  methods: {
    handleCheckAllChange (val) {
      this.checkedCities = val ? cityOptions : []
      this.checkAll = this.checkedCities.length === this.cities.length
      this.isIndeterminate = false
    },
    handleCheckedCitiesChange (value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.cities.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
    }
  }
}
</script>

2.3. Run the project