86.18d8a3c294fa42c93c4b.js

webpackJsonp([86],{"18H/":function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"Checkbox"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Checkbox-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Checkbox")]),s._v(" "),s._m(0),s._v(" "),a("h3",{attrs:{id:"Example"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Example-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Example")]),s._v(" "),s._m(1),s._v(" "),a("h3",{attrs:{id:"Propsconfiguration"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Propsconfiguration-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Props configuration")]),s._v(" "),s._m(2),s._v(" "),s._m(3),s._v(" "),s._m(4)])},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("Checkbox")]),s._v(" component. You can set the state, pass on special class and set the position of the checkbox's icon.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("p",[s._v("Basic usage")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checked"')]),s._v(">")]),s._v("\n  Checkbox\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-checkbox")]),s._v(">")]),s._v("\n")])]),s._v(" "),a("p",[s._v("If selected, the value of "),a("code",{pre:!0},[s._v("checked")]),s._v(" is "),a("code",{pre:!0},[s._v("true")]),s._v(".")])]),s._v(" "),a("li",[a("p",[s._v("Styled checkbox")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checked"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("position")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("shape")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"square"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":hollow-style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(">")]),s._v("\n  Styled Checkbox\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-checkbox")]),s._v(">")]),s._v("\n")])]),s._v(" "),a("p",[s._v("If setting "),a("code",{pre:!0},[s._v("position")]),s._v(" to "),a("code",{pre:!0},[s._v("'right'")]),s._v(", the position of the checkbox's icon is on the right. And you could use "),a("code",{pre:!0},[s._v("shape")]),s._v(" to configure the shape of icon,  set "),a("code",{pre:!0},[s._v("hollow-style=true")]),s._v(" to use hollow-out style.")])]),s._v(" "),a("li",[a("p",[s._v("Change the value of model")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checked"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":option")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"option"')]),s._v(" />")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checked")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("option")]),s._v(": {\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option Checkbox'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'optionValue'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n      }\n    }\n  }\n}\n")])]),s._v(" "),a("p",[s._v("If "),a("code",{pre:!0},[s._v("option")]),s._v(" is setted, and when the checkbox is selected, the value of "),a("code",{pre:!0},[s._v("checked")]),s._v(" is "),a("code",{pre:!0},[s._v("'optionValue'")]),s._v(". When not selected, the value is "),a("code",{pre:!0},[s._v("false")]),s._v("; Therefore, in circumstances of single checkbox, better not set "),a("code",{pre:!0},[s._v("option")]),s._v(".")])]),s._v(" "),a("li",[a("p",[s._v("Disabled state")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checked"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":option")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"{disabled: true}"')]),s._v(">")]),s._v("\n  Disabled Checkbox\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-checkbox")]),s._v(">")]),s._v("\n")])])]),s._v(" "),a("li",[a("p",[s._v("With click")]),s._v(" "),a("p",[s._v("If you want to handle click event, you need to handle the style:")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"with-click"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checked"')]),s._v(">")]),s._v("\n  Agree "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("a")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("href")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"javascript:;"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click.stop")]),s._v(">")]),s._v("《xxx》"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("a")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-checkbox")]),s._v(">")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-styl"}},[a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".with-click")]),s._v("\n  "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-checkbox-label")]),s._v("\n    "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("a")]),s._v("\n      "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("position")]),s._v(": relative\n      "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("z-index")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("\n")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("Attribute")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Type")]),s._v(" "),a("th",[s._v("Accepted Values")]),s._v(" "),a("th",[s._v("Default")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("option")]),s._v(" "),a("td",[s._v("option value")]),s._v(" "),a("td",[s._v("Boolean/String/Object")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("position")]),s._v(" "),a("td",[s._v("icon position")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[s._v("left/right")]),s._v(" "),a("td",[s._v("left")])]),s._v(" "),a("tr",[a("td",[s._v("shape")]),s._v(" "),a("td",[s._v("icon shape")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[s._v("circle/square")]),s._v(" "),a("td",[s._v("circle")])]),s._v(" "),a("tr",[a("td",[s._v("hollowStyle")]),s._v(" "),a("td",[s._v("whether is hollow-out style")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("true/false")]),s._v(" "),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("code",{pre:!0},[s._v("option")]),s._v(" sub configuration")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("Attribute")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Type")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("label")]),s._v(" "),a("td",[s._v("the text of label")]),s._v(" "),a("td",[s._v("String")])]),s._v(" "),a("tr",[a("td",[s._v("value")]),s._v(" "),a("td",[s._v("the value of checkbox item")]),s._v(" "),a("td",[s._v("String/Number")])]),s._v(" "),a("tr",[a("td",[s._v("disabled")]),s._v(" "),a("td",[s._v("whether the checkbox item is disabled")]),s._v(" "),a("td",[s._v("Boolean")])])])])}]}},QTnR:function(s,t,a){s.exports=a("nejK")},nejK:function(s,t,a){var e=a("VU/8")(null,a("18H/"),null,null,null);s.exports=e.exports}});