(window.webpackJsonp=window.webpackJsonp||[]).push([[40],{1447:function(s,a,t){"use strict";t.r(a);var e=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n  <a-checkbox @change="onChange">Checkbox</a-checkbox>\n',script:"\n  export default {\n    methods: {\n      onChange(e) {\n        console.log(`checked = ${e.target.checked}`);\n      },\n    },\n  };\n",style:null,us:"\n#### Basic\nBasic usage of checkbox\n",cn:"\n#### 基本用法\n简单的checkbox\n",sourceCode:'<template>\n  <a-checkbox @change="onChange">Checkbox</a-checkbox>\n</template>\n<script>\n  export default {\n    methods: {\n      onChange(e) {\n        console.log(`checked = ${e.target.checked}`);\n      },\n    },\n  };\n<\/script>\n'}}},[t("template",{slot:"component"},[t("a-checkbox",{on:{change:s.onChange}},[s._v("Checkbox")])],1),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"基本用法"}},[s._v("基本用法 "),t("a",{staticClass:"anchor",attrs:{href:"#基本用法"}},[s._v("#")])]),s._v(" "),t("p",[s._v("简单的checkbox")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Basic"}},[s._v("Basic "),t("a",{staticClass:"anchor",attrs:{href:"#Basic"}},[s._v("#")])]),s._v(" "),t("p",[s._v("Basic usage of checkbox")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-checkbox")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"onChange"')]),s._v(">")]),s._v("Checkbox"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-checkbox")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      onChange(e) {\n        "),t("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),t("span",{staticClass:"hljs-string"},[s._v("`checked = "),t("span",{staticClass:"hljs-subst"},[s._v("${e.target.checked}")]),s._v("`")]),s._v(");\n      },\n    },\n  };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])],2)]],2)};e._withStripped=!0;var n={methods:{onChange:function(s){console.log("checked = "+s.target.checked)}}},l=t(31),c=Object(l.a)(n,e,[],!1,null,null,null);c.options.__file="components/checkbox/demo/basic.md";var v=c.exports,i=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n  <div>\n    <div :style="{ borderBottom: \'1px solid #E9E9E9\' }">\n      <a-checkbox :indeterminate="indeterminate" @change="onCheckAllChange" :checked="checkAll">\n        Check all\n      </a-checkbox>\n    </div>\n    <br/>\n    <a-checkbox-group :options="plainOptions" v-model="checkedList" @change="onChange"/>\n  </div>\n',script:"\n  const plainOptions = ['Apple', 'Pear', 'Orange'];\n  const defaultCheckedList = ['Apple', 'Orange'];\n  export default {\n    data() {\n      return {\n        checkedList: defaultCheckedList,\n        indeterminate: true,\n        checkAll: false,\n        plainOptions,\n      };\n    },\n    methods: {\n      onChange(checkedList) {\n        this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length;\n        this.checkAll = checkedList.length === plainOptions.length;\n      },\n      onCheckAllChange(e) {\n        Object.assign(this, {\n          checkedList: e.target.checked ? plainOptions : [],\n          indeterminate: false,\n          checkAll: e.target.checked,\n        });\n      },\n    },\n  };\n",style:null,us:"\n#### Check all\nThe `indeterminate` property can help you to achieve a 'check all' effect.\n",cn:"\n#### 全选\n在实现全选效果时，你可能会用到`indeterminate`属性\n",sourceCode:'<template>\n  <div>\n    <div :style="{ borderBottom: \'1px solid #E9E9E9\' }">\n      <a-checkbox :indeterminate="indeterminate" @change="onCheckAllChange" :checked="checkAll">\n        Check all\n      </a-checkbox>\n    </div>\n    <br />\n    <a-checkbox-group :options="plainOptions" v-model="checkedList" @change="onChange" />\n  </div>\n</template>\n<script>\n  const plainOptions = [\'Apple\', \'Pear\', \'Orange\'];\n  const defaultCheckedList = [\'Apple\', \'Orange\'];\n  export default {\n    data() {\n      return {\n        checkedList: defaultCheckedList,\n        indeterminate: true,\n        checkAll: false,\n        plainOptions,\n      };\n    },\n    methods: {\n      onChange(checkedList) {\n        this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length;\n        this.checkAll = checkedList.length === plainOptions.length;\n      },\n      onCheckAllChange(e) {\n        Object.assign(this, {\n          checkedList: e.target.checked ? plainOptions : [],\n          indeterminate: false,\n          checkAll: e.target.checked,\n        });\n      },\n    },\n  };\n<\/script>\n'}}},[t("template",{slot:"component"},[t("div",[t("div",{style:{borderBottom:"1px solid #E9E9E9"}},[t("a-checkbox",{attrs:{indeterminate:s.indeterminate,checked:s.checkAll},on:{change:s.onCheckAllChange}},[s._v("\n        Check all\n      ")])],1),s._v(" "),t("br"),s._v(" "),t("a-checkbox-group",{attrs:{options:s.plainOptions},on:{change:s.onChange},model:{value:s.checkedList,callback:function(a){s.checkedList=a},expression:"checkedList"}})],1)]),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"全选"}},[s._v("全选 "),t("a",{staticClass:"anchor",attrs:{href:"#全选"}},[s._v("#")])]),s._v(" "),t("p",[s._v("在实现全选效果时，你可能会用到"),t("code",[s._v("indeterminate")]),s._v("属性")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Check-all"}},[s._v("Check all "),t("a",{staticClass:"anchor",attrs:{href:"#Check-all"}},[s._v("#")])]),s._v(" "),t("p",[s._v("The "),t("code",[s._v("indeterminate")]),s._v(" property can help you to achieve a 'check all' effect.")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"{ borderBottom: '1px solid #E9E9E9' }\"")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-checkbox")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":indeterminate")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"indeterminate"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"onCheckAllChange"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":checked")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"checkAll"')]),s._v(">")]),s._v("\n        Check all\n      "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-checkbox")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-checkbox-group")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"plainOptions"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"checkedList"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"onChange"')]),s._v(" />")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" plainOptions = ["),t("span",{staticClass:"hljs-string"},[s._v("'Apple'")]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v("'Pear'")]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v("'Orange'")]),s._v("];\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" defaultCheckedList = ["),t("span",{staticClass:"hljs-string"},[s._v("'Apple'")]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v("'Orange'")]),s._v("];\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[s._v("checkedList")]),s._v(": defaultCheckedList,\n        "),t("span",{staticClass:"hljs-attr"},[s._v("indeterminate")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n        "),t("span",{staticClass:"hljs-attr"},[s._v("checkAll")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n        plainOptions,\n      };\n    },\n    "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      onChange(checkedList) {\n        "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".indeterminate = !!checkedList.length && checkedList.length < plainOptions.length;\n        "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".checkAll = checkedList.length === plainOptions.length;\n      },\n      onCheckAllChange(e) {\n        "),t("span",{staticClass:"hljs-built_in"},[s._v("Object")]),s._v(".assign("),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(", {\n          "),t("span",{staticClass:"hljs-attr"},[s._v("checkedList")]),s._v(": e.target.checked ? plainOptions : [],\n          "),t("span",{staticClass:"hljs-attr"},[s._v("indeterminate")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n          "),t("span",{staticClass:"hljs-attr"},[s._v("checkAll")]),s._v(": e.target.checked,\n        });\n      },\n    },\n  };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])],2)]],2)};i._withStripped=!0;var _=t(2),h=t.n(_),o=["Apple","Pear","Orange"],p=["Apple","Orange"],r={data:function(){return{checkedList:p,indeterminate:!0,checkAll:!1,plainOptions:o}},methods:{onChange:function(s){this.indeterminate=!!s.length&&s.length<o.length,this.checkAll=s.length===o.length},onCheckAllChange:function(s){h()(this,{checkedList:s.target.checked?o:[],indeterminate:!1,checkAll:s.target.checked})}}},d=Object(l.a)(r,i,[],!1,null,null,null);d.options.__file="components/checkbox/demo/check-all.md";var C=d.exports,g=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n  <div>\n    <p :style="{ marginBottom: \'20px\' }">\n      <a-checkbox :checked="checked" :disabled="disabled" @change="onChange">\n        {{label}}\n      </a-checkbox>\n    </p>\n    <p>\n      <a-button type="primary" size="small" @click="toggleChecked">\n        {{!checked ? \'Check\' : \'Uncheck\'}}\n      </a-button>\n      <a-button :style="{ marginLeft: \'10px\' }" type="primary" size="small" @click="toggleDisable">\n        {{!disabled ? \'Disable\' : \'Enable\'}}\n      </a-button>\n    </p>\n  </div>\n',script:"\n  export default {\n    data() {\n      return {\n        checked: true,\n        disabled: false,\n      };\n    },\n    computed: {\n      label() {\n        const { checked, disabled } = this;\n        return `${checked ? 'Checked' : 'Unchecked'}-${disabled ? 'Disabled' : 'Enabled'}`;\n      },\n    },\n    methods: {\n      toggleChecked() {\n        this.checked = !this.checked;\n      },\n      toggleDisable() {\n        this.disabled = !this.disabled;\n      },\n      onChange(e) {\n        this.checked = e.target.checked;\n      },\n    },\n  };\n",style:null,us:"\n#### Controlled Checkbox\nCommunicated with other components\n",cn:"\n#### 受控的checkbox\n联动checkbox\n",sourceCode:'<template>\n  <div>\n    <p :style="{ marginBottom: \'20px\' }">\n      <a-checkbox :checked="checked" :disabled="disabled" @change="onChange">\n        {{label}}\n      </a-checkbox>\n    </p>\n    <p>\n      <a-button type="primary" size="small" @click="toggleChecked">\n        {{!checked ? \'Check\' : \'Uncheck\'}}\n      </a-button>\n      <a-button :style="{ marginLeft: \'10px\' }" type="primary" size="small" @click="toggleDisable">\n        {{!disabled ? \'Disable\' : \'Enable\'}}\n      </a-button>\n    </p>\n  </div>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        checked: true,\n        disabled: false,\n      };\n    },\n    computed: {\n      label() {\n        const { checked, disabled } = this;\n        return `${checked ? \'Checked\' : \'Unchecked\'}-${disabled ? \'Disabled\' : \'Enabled\'}`;\n      },\n    },\n    methods: {\n      toggleChecked() {\n        this.checked = !this.checked;\n      },\n      toggleDisable() {\n        this.disabled = !this.disabled;\n      },\n      onChange(e) {\n        this.checked = e.target.checked;\n      },\n    },\n  };\n<\/script>\n'}}},[t("template",{slot:"component"},[t("div",[t("p",{style:{marginBottom:"20px"}},[t("a-checkbox",{attrs:{checked:s.checked,disabled:s.disabled},on:{change:s.onChange}},[s._v("\n        "+s._s(s.label)+"\n      ")])],1),s._v(" "),t("p",[t("a-button",{attrs:{type:"primary",size:"small"},on:{click:s.toggleChecked}},[s._v("\n        "+s._s(s.checked?"Uncheck":"Check")+"\n      ")]),s._v(" "),t("a-button",{style:{marginLeft:"10px"},attrs:{type:"primary",size:"small"},on:{click:s.toggleDisable}},[s._v("\n        "+s._s(s.disabled?"Enable":"Disable")+"\n      ")])],1)])]),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"受控的checkbox"}},[s._v("受控的checkbox "),t("a",{staticClass:"anchor",attrs:{href:"#受控的checkbox"}},[s._v("#")])]),s._v(" "),t("p",[s._v("联动checkbox")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Controlled-Checkbox"}},[s._v("Controlled Checkbox "),t("a",{staticClass:"anchor",attrs:{href:"#Controlled-Checkbox"}},[s._v("#")])]),s._v(" "),t("p",[s._v("Communicated with other components")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"{ marginBottom: '20px' }\"")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-checkbox")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":checked")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"checked"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"disabled"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"onChange"')]),s._v(">")]),s._v("\n        "),t("span",[s._v("{{")]),s._v("label"),t("span",[s._v("}}")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-checkbox")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"toggleChecked"')]),s._v(">")]),s._v("\n        "),t("span",[s._v("{{")]),s._v("!checked ? 'Check' : 'Uncheck'"),t("span",[s._v("}}")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"{ marginLeft: '10px' }\"")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"toggleDisable"')]),s._v(">")]),s._v("\n        "),t("span",[s._v("{{")]),s._v("!disabled ? 'Disable' : 'Enable'"),t("span",[s._v("}}")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[s._v("checked")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n        "),t("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n      };\n    },\n    "),t("span",{staticClass:"hljs-attr"},[s._v("computed")]),s._v(": {\n      label() {\n        "),t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" { checked, disabled } = "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(";\n        "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v("`"),t("span",{staticClass:"hljs-subst"},[s._v("${checked ? "),t("span",{staticClass:"hljs-string"},[s._v("'Checked'")]),s._v(" : "),t("span",{staticClass:"hljs-string"},[s._v("'Unchecked'")]),s._v("}")]),s._v("-"),t("span",{staticClass:"hljs-subst"},[s._v("${disabled ? "),t("span",{staticClass:"hljs-string"},[s._v("'Disabled'")]),s._v(" : "),t("span",{staticClass:"hljs-string"},[s._v("'Enabled'")]),s._v("}")]),s._v("`")]),s._v(";\n      },\n    },\n    "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      toggleChecked() {\n        "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".checked = !"),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".checked;\n      },\n      toggleDisable() {\n        "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".disabled = !"),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".disabled;\n      },\n      onChange(e) {\n        "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".checked = e.target.checked;\n      },\n    },\n  };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])],2)]],2)};g._withStripped=!0;var b={data:function(){return{checked:!0,disabled:!1}},computed:{label:function(){return(this.checked?"Checked":"Unchecked")+"-"+(this.disabled?"Disabled":"Enabled")}},methods:{toggleChecked:function(){this.checked=!this.checked},toggleDisable:function(){this.disabled=!this.disabled},onChange:function(s){this.checked=s.target.checked}}},k=Object(l.a)(b,g,[],!1,null,null,null);k.options.__file="components/checkbox/demo/controller.md";var u=k.exports,j=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n  <div>\n    <a-checkbox :defaultChecked="false" disabled=""/>\n    <br/>\n    <a-checkbox defaultChecked="" disabled=""/>\n  </div>\n',script:null,style:null,us:"\n#### Disabled\nDisabled checkbox\n",cn:"\n#### 不可用\ncheckbox 不可用\n",sourceCode:'<template>\n  <div>\n    <a-checkbox :defaultChecked="false" disabled />\n    <br />\n    <a-checkbox defaultChecked disabled />\n  </div>\n</template>\n'}}},[t("template",{slot:"component"},[t("div",[t("a-checkbox",{attrs:{defaultChecked:!1,disabled:""}}),s._v(" "),t("br"),s._v(" "),t("a-checkbox",{attrs:{defaultChecked:"",disabled:""}})],1)]),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"不可用"}},[s._v("不可用 "),t("a",{staticClass:"anchor",attrs:{href:"#不可用"}},[s._v("#")])]),s._v(" "),t("p",[s._v("checkbox 不可用")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Disabled"}},[s._v("Disabled "),t("a",{staticClass:"anchor",attrs:{href:"#Disabled"}},[s._v("#")])]),s._v(" "),t("p",[s._v("Disabled checkbox")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-checkbox")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":defaultChecked")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(" />")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-checkbox")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("defaultChecked")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(" />")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])],2)]],2)};j._withStripped=!0;var m=Object(l.a)({},j,[],!1,null,null,null);m.options.__file="components/checkbox/demo/disabled.md";var x=m.exports,f=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n  <div>\n    <a-checkbox-group :options="plainOptions" v-model="value" @change="onChange"/>\n    <br/>\n    <a-checkbox-group :options="plainOptions" :defaultValue="[\'Apple\']" @change="onChange"/>\n    <br/>\n    <a-checkbox-group :options="options" :value="[\'Pear\']" @change="onChange"/>\n    <br/>\n    <a-checkbox-group :options="optionsWithDisabled" disabled="" :defaultValue="[\'Apple\']" @change="onChange">\n      <span style="color: red" slot="label" slot-scope="{value}">{{value}}</span>\n    </a-checkbox-group>\n  </div>\n',script:"\n  const plainOptions = ['Apple', 'Pear', 'Orange'];\n  const options = [\n    { label: 'Apple', value: 'Apple' },\n    { label: 'Pear', value: 'Pear' },\n    { label: 'Orange', value: 'Orange' },\n  ];\n  const optionsWithDisabled = [\n    { value: 'Apple' },\n    { label: 'Pear', value: 'Pear' },\n    { label: 'Orange', value: 'Orange', disabled: false },\n  ];\n  export default {\n    data() {\n      return {\n        plainOptions,\n        options,\n        optionsWithDisabled,\n        value: [],\n      };\n    },\n    methods: {\n      onChange(checkedValues) {\n        console.log('checked = ', checkedValues);\n        console.log('value = ', this.value);\n      },\n    },\n  };\n",style:null,us:"\n#### Checkbox group\nGenerate a group of checkboxes from an array\n",cn:"\n#### Checkbox组\n方便的从数组生成checkbox\n",sourceCode:"<template>\n  <div>\n    <a-checkbox-group :options=\"plainOptions\" v-model=\"value\" @change=\"onChange\" />\n    <br />\n    <a-checkbox-group :options=\"plainOptions\" :defaultValue=\"['Apple']\" @change=\"onChange\" />\n    <br />\n    <a-checkbox-group :options=\"options\" :value=\"['Pear']\" @change=\"onChange\" />\n    <br />\n    <a-checkbox-group\n      :options=\"optionsWithDisabled\"\n      disabled\n      :defaultValue=\"['Apple']\"\n      @change=\"onChange\"\n    >\n      <span style=\"color: red\" slot=\"label\" slot-scope=\"{value}\">{{value}}</span>\n    </a-checkbox-group>\n  </div>\n</template>\n<script>\n  const plainOptions = ['Apple', 'Pear', 'Orange'];\n  const options = [\n    { label: 'Apple', value: 'Apple' },\n    { label: 'Pear', value: 'Pear' },\n    { label: 'Orange', value: 'Orange' },\n  ];\n  const optionsWithDisabled = [\n    { value: 'Apple' },\n    { label: 'Pear', value: 'Pear' },\n    { label: 'Orange', value: 'Orange', disabled: false },\n  ];\n  export default {\n    data() {\n      return {\n        plainOptions,\n        options,\n        optionsWithDisabled,\n        value: [],\n      };\n    },\n    methods: {\n      onChange(checkedValues) {\n        console.log('checked = ', checkedValues);\n        console.log('value = ', this.value);\n      },\n    },\n  };\n<\/script>\n"}}},[t("template",{slot:"component"},[t("div",[t("a-checkbox-group",{attrs:{options:s.plainOptions},on:{change:s.onChange},model:{value:s.value,callback:function(a){s.value=a},expression:"value"}}),s._v(" "),t("br"),s._v(" "),t("a-checkbox-group",{attrs:{options:s.plainOptions,defaultValue:["Apple"]},on:{change:s.onChange}}),s._v(" "),t("br"),s._v(" "),t("a-checkbox-group",{attrs:{options:s.options,value:["Pear"]},on:{change:s.onChange}}),s._v(" "),t("br"),s._v(" "),t("a-checkbox-group",{attrs:{options:s.optionsWithDisabled,disabled:"",defaultValue:["Apple"]},on:{change:s.onChange},scopedSlots:s._u([{key:"label",fn:function(a){var e=a.value;return t("span",{staticStyle:{color:"red"}},[s._v(s._s(e))])}}])})],1)]),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"Checkbox组"}},[s._v("Checkbox组 "),t("a",{staticClass:"anchor",attrs:{href:"#Checkbox组"}},[s._v("#")])]),s._v(" "),t("p",[s._v("方便的从数组生成checkbox")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Checkbox-group"}},[s._v("Checkbox group "),t("a",{staticClass:"anchor",attrs:{href:"#Checkbox-group"}},[s._v("#")])]),s._v(" "),t("p",[s._v("Generate a group of checkboxes from an array")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-checkbox-group")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"plainOptions"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"onChange"')]),s._v(" />")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-checkbox-group")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"plainOptions"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":defaultValue")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"['Apple']\"")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"onChange"')]),s._v(" />")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-checkbox-group")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"['Pear']\"")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"onChange"')]),s._v(" />")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-checkbox-group")]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"optionsWithDisabled"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v(":defaultValue")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"['Apple']\"")]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"onChange"')]),s._v("\n    >")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"color: red"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"label"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("slot-scope")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"{value}"')]),s._v(">")]),t("span",[s._v("{{")]),s._v("value"),t("span",[s._v("}}")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-checkbox-group")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" plainOptions = ["),t("span",{staticClass:"hljs-string"},[s._v("'Apple'")]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v("'Pear'")]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v("'Orange'")]),s._v("];\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" options = [\n    { "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Apple'")]),s._v(", "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Apple'")]),s._v(" },\n    { "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Pear'")]),s._v(", "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Pear'")]),s._v(" },\n    { "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Orange'")]),s._v(", "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Orange'")]),s._v(" },\n  ];\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" optionsWithDisabled = [\n    { "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Apple'")]),s._v(" },\n    { "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Pear'")]),s._v(", "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Pear'")]),s._v(" },\n    { "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Orange'")]),s._v(", "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Orange'")]),s._v(", "),t("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(" },\n  ];\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        plainOptions,\n        options,\n        optionsWithDisabled,\n        "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": [],\n      };\n    },\n    "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      onChange(checkedValues) {\n        "),t("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),t("span",{staticClass:"hljs-string"},[s._v("'checked = '")]),s._v(", checkedValues);\n        "),t("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),t("span",{staticClass:"hljs-string"},[s._v("'value = '")]),s._v(", "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".value);\n      },\n    },\n  };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])],2)]],2)};f._withStripped=!0;var y=["Apple","Pear","Orange"],O=[{label:"Apple",value:"Apple"},{label:"Pear",value:"Pear"},{label:"Orange",value:"Orange"}],A=[{value:"Apple"},{label:"Pear",value:"Pear"},{label:"Orange",value:"Orange",disabled:!1}],w={data:function(){return{plainOptions:y,options:O,optionsWithDisabled:A,value:[]}},methods:{onChange:function(s){console.log("checked = ",s),console.log("value = ",this.value)}}},D=Object(l.a)(w,f,[],!1,null,null,null);D.options.__file="components/checkbox/demo/group.md";var E=D.exports,P=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n  <a-checkbox-group @change="onChange">\n    <a-row>\n      <a-col :span="8"><a-checkbox value="A">A</a-checkbox></a-col>\n      <a-col :span="8"><a-checkbox value="B">B</a-checkbox></a-col>\n      <a-col :span="8"><a-checkbox value="C">C</a-checkbox></a-col>\n      <a-col :span="8"><a-checkbox value="D">D</a-checkbox></a-col>\n      <a-col :span="8"><a-checkbox value="E">E</a-checkbox></a-col>\n    </a-row>\n  </a-checkbox-group>\n',script:"\n  export default {\n    methods: {\n      onChange(checkedValues) {\n        console.log('checked = ', checkedValues);\n      },\n    },\n  };\n",style:null,us:"\n#### Use with grid\nWe can use Checkbox and Grid Checkbox.group, to implement complex layout\n",cn:"\n#### 布局\nCheckbox.Group内嵌Checkbox并与Grid组件一起使用，可以实现灵活的布局\n",sourceCode:'<template>\n  <a-checkbox-group @change="onChange">\n    <a-row>\n      <a-col :span="8"><a-checkbox value="A">A</a-checkbox></a-col>\n      <a-col :span="8"><a-checkbox value="B">B</a-checkbox></a-col>\n      <a-col :span="8"><a-checkbox value="C">C</a-checkbox></a-col>\n      <a-col :span="8"><a-checkbox value="D">D</a-checkbox></a-col>\n      <a-col :span="8"><a-checkbox value="E">E</a-checkbox></a-col>\n    </a-row>\n  </a-checkbox-group>\n</template>\n<script>\n  export default {\n    methods: {\n      onChange(checkedValues) {\n        console.log(\'checked = \', checkedValues);\n      },\n    },\n  };\n<\/script>\n'}}},[t("template",{slot:"component"},[t("a-checkbox-group",{on:{change:s.onChange}},[t("a-row",[t("a-col",{attrs:{span:8}},[t("a-checkbox",{attrs:{value:"A"}},[s._v("A")])],1),s._v(" "),t("a-col",{attrs:{span:8}},[t("a-checkbox",{attrs:{value:"B"}},[s._v("B")])],1),s._v(" "),t("a-col",{attrs:{span:8}},[t("a-checkbox",{attrs:{value:"C"}},[s._v("C")])],1),s._v(" "),t("a-col",{attrs:{span:8}},[t("a-checkbox",{attrs:{value:"D"}},[s._v("D")])],1),s._v(" "),t("a-col",{attrs:{span:8}},[t("a-checkbox",{attrs:{value:"E"}},[s._v("E")])],1)],1)],1)],1),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"布局"}},[s._v("布局 "),t("a",{staticClass:"anchor",attrs:{href:"#布局"}},[s._v("#")])]),s._v(" "),t("p",[s._v("Checkbox.Group内嵌Checkbox并与Grid组件一起使用，可以实现灵活的布局")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Use-with-grid"}},[s._v("Use with grid "),t("a",{staticClass:"anchor",attrs:{href:"#Use-with-grid"}},[s._v("#")])]),s._v(" "),t("p",[s._v("We can use Checkbox and Grid Checkbox.group, to implement complex layout")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-checkbox-group")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"onChange"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-checkbox")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"A"')]),s._v(">")]),s._v("A"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-checkbox")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-checkbox")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"B"')]),s._v(">")]),s._v("B"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-checkbox")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-checkbox")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"C"')]),s._v(">")]),s._v("C"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-checkbox")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-checkbox")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"D"')]),s._v(">")]),s._v("D"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-checkbox")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-checkbox")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"E"')]),s._v(">")]),s._v("E"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-checkbox")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-checkbox-group")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      onChange(checkedValues) {\n        "),t("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),t("span",{staticClass:"hljs-string"},[s._v("'checked = '")]),s._v(", checkedValues);\n      },\n    },\n  };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])],2)]],2)};P._withStripped=!0;var L={methods:{onChange:function(s){console.log("checked = ",s)}}},V=Object(l.a)(L,P,[],!1,null,null,null);V.options.__file="components/checkbox/demo/layout.md";var B=V.exports,$=function(){var s=this.$createElement;this._self._c;return this._m(0)};$._withStripped=!0;var S=Object(l.a)({},$,[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[t("h2",{attrs:{id:"API"}},[s._v("API "),t("a",{staticClass:"anchor",attrs:{href:"#API"}},[s._v("#")])]),s._v(" "),t("h3",{attrs:{id:"属性"}},[s._v("属性 "),t("a",{staticClass:"anchor",attrs:{href:"#属性"}},[s._v("#")])]),s._v(" "),t("h4",{attrs:{id:"Checkbox"}},[s._v("Checkbox "),t("a",{staticClass:"anchor",attrs:{href:"#Checkbox"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("参数")]),s._v(" "),t("th",[s._v("说明")]),s._v(" "),t("th",[s._v("类型")]),s._v(" "),t("th",[s._v("默认值")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("autoFocus")]),s._v(" "),t("td",[s._v("自动获取焦点")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("false")])]),s._v(" "),t("tr",[t("td",[s._v("checked")]),s._v(" "),t("td",[s._v("指定当前是否选中")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("false")])]),s._v(" "),t("tr",[t("td",[s._v("defaultChecked")]),s._v(" "),t("td",[s._v("初始是否选中")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("false")])]),s._v(" "),t("tr",[t("td",[s._v("disabled")]),s._v(" "),t("td",[s._v("失效状态")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("false")])]),s._v(" "),t("tr",[t("td",[s._v("indeterminate")]),s._v(" "),t("td",[s._v("设置 indeterminate 状态，只负责样式控制")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("false")])])])]),s._v(" "),t("h4",{attrs:{id:"事件"}},[s._v("事件 "),t("a",{staticClass:"anchor",attrs:{href:"#事件"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("事件名称")]),s._v(" "),t("th",[s._v("说明")]),s._v(" "),t("th",[s._v("回调参数")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("change")]),s._v(" "),t("td",[s._v("变化时回调函数")]),s._v(" "),t("td",[s._v("Function(e:Event)")])])])]),s._v(" "),t("h4",{attrs:{id:"Checkbox-Group"}},[s._v("Checkbox Group "),t("a",{staticClass:"anchor",attrs:{href:"#Checkbox-Group"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("参数")]),s._v(" "),t("th",[s._v("说明")]),s._v(" "),t("th",[s._v("类型")]),s._v(" "),t("th",[s._v("默认值")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("defaultValue")]),s._v(" "),t("td",[s._v("默认选中的选项")]),s._v(" "),t("td",[s._v("string[]")]),s._v(" "),t("td",[s._v("[]")])]),s._v(" "),t("tr",[t("td",[s._v("disabled")]),s._v(" "),t("td",[s._v("整组失效")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("false")])]),s._v(" "),t("tr",[t("td",[s._v("options")]),s._v(" "),t("td",[s._v('指定可选项，可以通过 slot="label" slot-scope="option" 定制'),t("code",{pre:!0},[s._v("label")])]),s._v(" "),t("td",[s._v("string[] | Array<{ label: string value: string disabled?: boolean, onChange?: function }>")]),s._v(" "),t("td",[s._v("[]")])]),s._v(" "),t("tr",[t("td",[s._v("value")]),s._v(" "),t("td",[s._v("指定选中的选项")]),s._v(" "),t("td",[s._v("string[]")]),s._v(" "),t("td",[s._v("[]")])])])]),s._v(" "),t("h4",{attrs:{id:"事件-2"}},[s._v("事件 "),t("a",{staticClass:"anchor",attrs:{href:"#事件-2"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("事件名称")]),s._v(" "),t("th",[s._v("说明")]),s._v(" "),t("th",[s._v("回调参数")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("change")]),s._v(" "),t("td",[s._v("变化时回调函数")]),s._v(" "),t("td",[s._v("Function(checkedValue)")])])])]),s._v(" "),t("h3",{attrs:{id:"方法"}},[s._v("方法 "),t("a",{staticClass:"anchor",attrs:{href:"#方法"}},[s._v("#")])]),s._v(" "),t("h4",{attrs:{id:"Checkbox-2"}},[s._v("Checkbox "),t("a",{staticClass:"anchor",attrs:{href:"#Checkbox-2"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("名称")]),s._v(" "),t("th",[s._v("描述")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("blur()")]),s._v(" "),t("td",[s._v("移除焦点")])]),s._v(" "),t("tr",[t("td",[s._v("focus()")]),s._v(" "),t("td",[s._v("获取焦点")])])])])])}],!1,null,null,null);S.options.__file="components/checkbox/index.zh-CN.md";var U=S.exports,G=function(){var s=this.$createElement;this._self._c;return this._m(0)};G._withStripped=!0;var W=Object(l.a)({},G,[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[t("h2",{attrs:{id:"API"}},[s._v("API "),t("a",{staticClass:"anchor",attrs:{href:"#API"}},[s._v("#")])]),s._v(" "),t("h3",{attrs:{id:"Props"}},[s._v("Props "),t("a",{staticClass:"anchor",attrs:{href:"#Props"}},[s._v("#")])]),s._v(" "),t("h4",{attrs:{id:"Checkbox"}},[s._v("Checkbox "),t("a",{staticClass:"anchor",attrs:{href:"#Checkbox"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("Property")]),s._v(" "),t("th",[s._v("Description")]),s._v(" "),t("th",[s._v("Type")]),s._v(" "),t("th",[s._v("Default")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("autoFocus")]),s._v(" "),t("td",[s._v("get focus when component mounted")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("false")])]),s._v(" "),t("tr",[t("td",[s._v("checked")]),s._v(" "),t("td",[s._v("Specifies whether the checkbox is selected.")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("false")])]),s._v(" "),t("tr",[t("td",[s._v("defaultChecked")]),s._v(" "),t("td",[s._v("Specifies the initial state: whether or not the checkbox is selected.")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("false")])]),s._v(" "),t("tr",[t("td",[s._v("disabled")]),s._v(" "),t("td",[s._v("Disable checkbox")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("false")])]),s._v(" "),t("tr",[t("td",[s._v("indeterminate")]),s._v(" "),t("td",[s._v("indeterminate checked state of checkbox")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("false")])])])]),s._v(" "),t("h4",{attrs:{id:"events"}},[s._v("events "),t("a",{staticClass:"anchor",attrs:{href:"#events"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("Events Name")]),s._v(" "),t("th",[s._v("Description")]),s._v(" "),t("th",[s._v("Arguments")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("change")]),s._v(" "),t("td",[s._v("The callback function that is triggered when the state changes.")]),s._v(" "),t("td",[s._v("Function(e:Event)")])])])]),s._v(" "),t("h4",{attrs:{id:"Checkbox-Group"}},[s._v("Checkbox Group "),t("a",{staticClass:"anchor",attrs:{href:"#Checkbox-Group"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("Property")]),s._v(" "),t("th",[s._v("Description")]),s._v(" "),t("th",[s._v("Type")]),s._v(" "),t("th",[s._v("Default")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("defaultValue")]),s._v(" "),t("td",[s._v("Default selected value")]),s._v(" "),t("td",[s._v("string[]")]),s._v(" "),t("td",[s._v("[]")])]),s._v(" "),t("tr",[t("td",[s._v("disabled")]),s._v(" "),t("td",[s._v("Disable all checkboxes")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("false")])]),s._v(" "),t("tr",[t("td",[s._v("options")]),s._v(" "),t("td",[s._v("Specifies options, you can customize "),t("code",{pre:!0},[s._v("label")]),s._v(' with slot = "label" slot-scope="option"')]),s._v(" "),t("td",[s._v("string[] | Array<{ label: string value: string disabled?: boolean, onChange?: function }>")]),s._v(" "),t("td",[s._v("[]")])]),s._v(" "),t("tr",[t("td",[s._v("value")]),s._v(" "),t("td",[s._v("Used for setting the currently selected value.")]),s._v(" "),t("td",[s._v("string[]")]),s._v(" "),t("td",[s._v("[]")])])])]),s._v(" "),t("h4",{attrs:{id:"events-2"}},[s._v("events "),t("a",{staticClass:"anchor",attrs:{href:"#events-2"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("Events Name")]),s._v(" "),t("th",[s._v("Description")]),s._v(" "),t("th",[s._v("Arguments")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("change")]),s._v(" "),t("td",[s._v("The callback function that is triggered when the state changes.")]),s._v(" "),t("td",[s._v("Function(checkedValue)")])])])]),s._v(" "),t("h3",{attrs:{id:"Methods"}},[s._v("Methods "),t("a",{staticClass:"anchor",attrs:{href:"#Methods"}},[s._v("#")])]),s._v(" "),t("h4",{attrs:{id:"Checkbox-2"}},[s._v("Checkbox "),t("a",{staticClass:"anchor",attrs:{href:"#Checkbox-2"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("Name")]),s._v(" "),t("th",[s._v("Description")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("blur()")]),s._v(" "),t("td",[s._v("remove focus")])]),s._v(" "),t("tr",[t("td",[s._v("focus()")]),s._v(" "),t("td",[s._v("get focus")])])])])])}],!1,null,null,null);W.options.__file="components/checkbox/index.en-US.md";var z=W.exports,T="# Checkbox多选框\n           多选框\n         ## 何时使用\n         - 在一组可选项中进行多项选择时；\n         - 单独使用可以表示两种状态之间的切换，和 switch 类似。区别在于切换 switch 会直接触发状态改变，而 checkbox 一般用于状态标记，需要和提交操作配合。\n         ## 代码演示\n        ",I="# Checkbox\n           Checkbox component\n         ## When to use\n         - Used for selecting multiple values from several options.\n         - If you use only one checkbox, it is the same as using Switch to toggle between two states. The difference is that Switch will trigger the state change directly, but Checkbox just marks the state as changed and this needs to be submitted.\n         ## Examples\n        ",F={category:"Components",subtitle:"多选框",type:"Data Entry",zhType:"数据录入",title:"Checkbox",render:function(){var s=arguments[0];return s("div",[s("md",{attrs:{cn:T,us:I}}),s(v),s(C),s(x),s(u),s(E),s(B),s("api",[s(U,{slot:"cn"}),s(z)])])}},N=Object(l.a)(F,void 0,void 0,!1,null,null,null);N.options.__file="components/checkbox/demo/index.vue";a.default=N.exports}}]);