提交 5517501a 编写于 作者: D dolymood

build: docs

上级 bf7dd446
<!DOCTYPE html><html><head><meta charset=UTF-8><title>cube-ui lib</title><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover"><link rel="shortcut icon" type=images/x-icon href=//webapp.didistatic.com/static/webapp/shield/Cube-UI_logo.ico><link href=css/app.4ce1359c75c112f08d3391dd983b5796.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=js/manifest.346dd10710fe9c0348bf.js></script><script type=text/javascript src=js/vendor.7a09809d80067f7ce423.js></script><script type=text/javascript src=js/app.a749e8783e7fdceb605a.js></script></body></html>
\ No newline at end of file
<!DOCTYPE html><html><head><meta charset=UTF-8><title>cube-ui lib</title><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover"><link rel="shortcut icon" type=images/x-icon href=//webapp.didistatic.com/static/webapp/shield/Cube-UI_logo.ico><link href=css/app.442ac17d441ab770f35bd63b9aeda8de.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=js/manifest.346dd10710fe9c0348bf.js></script><script type=text/javascript src=js/vendor.7a09809d80067f7ce423.js></script><script type=text/javascript src=js/app.897c63a81e8ccf29403f.js></script></body></html>
\ No newline at end of file
<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"><meta name=x5-cache content=disable><meta name=keywords content=CUBE,UI,VUE,COMPONENT,LIB,LIBRARY><link rel="shortcut icon" type=images/x-icon href=//webapp.didistatic.com/static/webapp/shield/Cube-UI_logo.ico><title>cube-ui Document</title><link href=/cube-ui/css/app.eff0dd361031a52994230f4aae1f87da.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/cube-ui/js/manifest.7e956fd9ee07619b2efc.js></script><script type=text/javascript src=/cube-ui/js/vendor.b0de84c8a7f535ca341d.js></script><script type=text/javascript src=/cube-ui/js/app.047379a9461437e7f1ca.js></script></body></html>
\ No newline at end of file
<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"><meta name=x5-cache content=disable><meta name=keywords content=CUBE,UI,VUE,COMPONENT,LIB,LIBRARY><link rel="shortcut icon" type=images/x-icon href=//webapp.didistatic.com/static/webapp/shield/Cube-UI_logo.ico><title>cube-ui Document</title><link href=/cube-ui/css/app.eff0dd361031a52994230f4aae1f87da.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/cube-ui/js/manifest.8dd260e6338a67169a75.js></script><script type=text/javascript src=/cube-ui/js/vendor.b0de84c8a7f535ca341d.js></script><script type=text/javascript src=/cube-ui/js/app.047379a9461437e7f1ca.js></script></body></html>
\ No newline at end of file
webpackJsonp([40],{"3n+F":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(" "),a("p",[s._v("复选框,可设置其状态、传入特殊 class 以及复选框图标位置。")]),s._v(" "),a("h3",{attrs:{id:"示例"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-示例-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(" 示例")]),s._v(" "),s._m(0),s._v(" "),a("h3",{attrs:{id:"Props配置"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Props配置-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 配置")]),s._v(" "),s._m(1),s._v(" "),s._m(2),s._v(" "),s._m(3)])},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("p",[s._v("基本用法")]),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("如果选中了,则 "),a("code",{pre:!0},[s._v("checked")]),s._v(" 的值就为 "),a("code",{pre:!0},[s._v("true")]),s._v("")])]),s._v(" "),a("li",[a("p",[s._v("复选框图标样式")]),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("设置 "),a("code",{pre:!0},[s._v("position")]),s._v(""),a("code",{pre:!0},[s._v("'right'")]),s._v(" 则复选框图标位置在右边,且可以通过 "),a("code",{pre:!0},[s._v("shape")]),s._v(" 配置图标形状以及设置 "),a("code",{pre:!0},[s._v("hollow-style")]),s._v(""),a("code",{pre:!0},[s._v("true")]),s._v(" 代表显示的是镂空样式的(即使 "),a("code",{pre:!0},[s._v("shape")]),s._v(" 不是 "),a("code",{pre:!0},[s._v("square")]),s._v(" 表现的也是方形的)。")])]),s._v(" "),a("li",[a("p",[s._v("改变 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("设置 "),a("code",{pre:!0},[s._v("option")]),s._v(",当复选框选中的时候,"),a("code",{pre:!0},[s._v("checked")]),s._v(" 的值就是 "),a("code",{pre:!0},[s._v("'optionValue'")]),s._v(",当未选中的时候,"),a("code",{pre:!0},[s._v("checked")]),s._v(" 的值就是 "),a("code",{pre:!0},[s._v("false")]),s._v(";所以其实在单个复选框的场景下,最好不要设置 "),a("code",{pre:!0},[s._v("option")]),s._v("")])]),s._v(" "),a("li",[a("p",[s._v("禁用状态")]),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("处理点击事件")]),s._v(" "),a("p",[s._v("如果你需要处理点击事件,你需要修改下样式:")]),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("参数")]),s._v(" "),a("th",[s._v("说明")]),s._v(" "),a("th",[s._v("类型")]),s._v(" "),a("th",[s._v("可选值")]),s._v(" "),a("th",[s._v("默认值")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("option")]),s._v(" "),a("td",[s._v("配置项")]),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("位置")]),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("图标形状")]),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("是否是镂空样式的")]),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(" 子配置项")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("参数")]),s._v(" "),a("th",[s._v("说明")]),s._v(" "),a("th",[s._v("类型")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("label")]),s._v(" "),a("td",[s._v("复选框显示文字")]),s._v(" "),a("td",[s._v("String")])]),s._v(" "),a("tr",[a("td",[s._v("value")]),s._v(" "),a("td",[s._v("复选框的值")]),s._v(" "),a("td",[s._v("String/Number")])]),s._v(" "),a("tr",[a("td",[s._v("disabled")]),s._v(" "),a("td",[s._v("复选框是否被禁用")]),s._v(" "),a("td",[s._v("Boolean")])])])])}]}},mCyT:function(s,t,a){var v=a("VU/8")(null,a("3n+F"),null,null,null);s.exports=v.exports},n3PG:function(s,t,a){s.exports=a("mCyT")}});
\ No newline at end of file
webpackJsonp([40],{"3n+F":function(t,s){t.exports={render:function(){var t=this,s=t.$createElement,a=t._self._c||s;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"}})])]),t._v(" Checkbox 复选框")]),t._v(" "),a("p",[t._v("复选框,可设置其状态、传入特殊 class 以及复选框图标位置。")]),t._v(" "),a("h3",{attrs:{id:"示例"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-示例-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"}})])]),t._v(" 示例")]),t._v(" "),t._m(0),t._v(" "),a("h3",{attrs:{id:"Props配置"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Props配置-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"}})])]),t._v(" Props 配置")]),t._v(" "),t._m(1),t._v(" "),t._m(2),t._v(" "),t._m(3)])},staticRenderFns:[function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ul",[a("li",[a("p",[t._v("基本用法")]),t._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("cube-checkbox")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"checked"')]),t._v(">")]),t._v("\n Checkbox\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("cube-checkbox")]),t._v(">")]),t._v("\n")])]),t._v(" "),a("p",[t._v("如果选中了,则 "),a("code",{pre:!0},[t._v("checked")]),t._v(" 的值就为 "),a("code",{pre:!0},[t._v("true")]),t._v("")])]),t._v(" "),a("li",[a("p",[t._v("复选框图标样式")]),t._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("cube-checkbox")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"checked"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("position")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"right"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("shape")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"square"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":hollow-style")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"true"')]),t._v(">")]),t._v("\n Styled Checkbox\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("cube-checkbox")]),t._v(">")]),t._v("\n")])]),t._v(" "),a("p",[t._v("设置 "),a("code",{pre:!0},[t._v("position")]),t._v(""),a("code",{pre:!0},[t._v("'right'")]),t._v(" 则复选框图标位置在右边,且可以通过 "),a("code",{pre:!0},[t._v("shape")]),t._v(" 配置图标形状以及设置 "),a("code",{pre:!0},[t._v("hollow-style")]),t._v(""),a("code",{pre:!0},[t._v("true")]),t._v(" 代表显示的是镂空样式的(即使 "),a("code",{pre:!0},[t._v("shape")]),t._v(" 不是 "),a("code",{pre:!0},[t._v("square")]),t._v(" 表现的也是方形的)。")])]),t._v(" "),a("li",[a("p",[t._v("改变 model 的值")]),t._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("cube-checkbox")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"checked"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":option")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"option"')]),t._v(" />")]),t._v("\n")])]),t._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("checked")]),t._v(": "),a("span",{attrs:{class:"hljs-literal"}},[t._v("false")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("option")]),t._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option Checkbox'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'optionValue'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("disabled")]),t._v(": "),a("span",{attrs:{class:"hljs-literal"}},[t._v("false")]),t._v("\n }\n }\n }\n}\n")])]),t._v(" "),a("p",[t._v("设置 "),a("code",{pre:!0},[t._v("option")]),t._v(",当复选框选中的时候,"),a("code",{pre:!0},[t._v("checked")]),t._v(" 的值就是 "),a("code",{pre:!0},[t._v("'optionValue'")]),t._v(",当未选中的时候,"),a("code",{pre:!0},[t._v("checked")]),t._v(" 的值就是 "),a("code",{pre:!0},[t._v("false")]),t._v(";所以其实在单个复选框的场景下,最好不要设置 "),a("code",{pre:!0},[t._v("option")]),t._v("")])]),t._v(" "),a("li",[a("p",[t._v("禁用状态")]),t._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("cube-checkbox")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"checked"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":option")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"{disabled: true}"')]),t._v(">")]),t._v("\n Disabled Checkbox\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("cube-checkbox")]),t._v(">")]),t._v("\n")])])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("table",[a("thead",[a("tr",[a("th",[t._v("参数")]),t._v(" "),a("th",[t._v("说明")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("可选值")]),t._v(" "),a("th",[t._v("默认值")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("option")]),t._v(" "),a("td",[t._v("配置项")]),t._v(" "),a("td",[t._v("Boolean/String/Object")]),t._v(" "),a("td",[t._v("-")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("position")]),t._v(" "),a("td",[t._v("位置")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[t._v("left/right")]),t._v(" "),a("td",[t._v("left")])]),t._v(" "),a("tr",[a("td",[t._v("shape")]),t._v(" "),a("td",[t._v("图标形状")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[t._v("circle/square")]),t._v(" "),a("td",[t._v("circle")])]),t._v(" "),a("tr",[a("td",[t._v("hollowStyle")]),t._v(" "),a("td",[t._v("是否是镂空样式的")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[t._v("true/false")]),t._v(" "),a("td",[t._v("false")])])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ul",[a("li",[a("code",{pre:!0},[t._v("option")]),t._v(" 子配置项")])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("table",[a("thead",[a("tr",[a("th",[t._v("参数")]),t._v(" "),a("th",[t._v("说明")]),t._v(" "),a("th",[t._v("类型")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("label")]),t._v(" "),a("td",[t._v("复选框显示文字")]),t._v(" "),a("td",[t._v("String")])]),t._v(" "),a("tr",[a("td",[t._v("value")]),t._v(" "),a("td",[t._v("复选框的值")]),t._v(" "),a("td",[t._v("String/Number")])]),t._v(" "),a("tr",[a("td",[t._v("disabled")]),t._v(" "),a("td",[t._v("复选框是否被禁用")]),t._v(" "),a("td",[t._v("Boolean")])])])])}]}},mCyT:function(t,s,a){var v=a("VU/8")(null,a("3n+F"),null,null,null);t.exports=v.exports},n3PG:function(t,s,a){t.exports=a("mCyT")}});
\ No newline at end of file
webpackJsonp([84],{QTnR:function(s,t,a){s.exports=a("nejK")},V4w7: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")])])])])}]}},nejK:function(s,t,a){var e=a("VU/8")(null,a("V4w7"),null,null,null);s.exports=e.exports}});
\ No newline at end of file
webpackJsonp([84],{QTnR:function(t,s,e){t.exports=e("nejK")},V4w7:function(t,s){t.exports={render:function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("section",[e("h2",{attrs:{id:"Checkbox"}},[e("a",{staticClass:"anchor",attrs:{href:"#cube-Checkbox-anchor","aria-hidden":"true"}},[e("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[e("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"}})])]),t._v(" Checkbox")]),t._v(" "),t._m(0),t._v(" "),e("h3",{attrs:{id:"Example"}},[e("a",{staticClass:"anchor",attrs:{href:"#cube-Example-anchor","aria-hidden":"true"}},[e("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[e("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"}})])]),t._v(" Example")]),t._v(" "),t._m(1),t._v(" "),e("h3",{attrs:{id:"Propsconfiguration"}},[e("a",{staticClass:"anchor",attrs:{href:"#cube-Propsconfiguration-anchor","aria-hidden":"true"}},[e("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[e("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"}})])]),t._v(" Props configuration")]),t._v(" "),t._m(2),t._v(" "),t._m(3),t._v(" "),t._m(4)])},staticRenderFns:[function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("p",[e("code",{pre:!0},[t._v("Checkbox")]),t._v(" component. You can set the state, pass on special class and set the position of the checkbox's icon.")])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("ul",[e("li",[e("p",[t._v("Basic usage")]),t._v(" "),e("pre",{pre:!0},[e("code",{attrs:{"v-pre":"",class:"language-html"}},[e("span",{attrs:{class:"hljs-tag"}},[t._v("<"),e("span",{attrs:{class:"hljs-name"}},[t._v("cube-checkbox")]),t._v(" "),e("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),e("span",{attrs:{class:"hljs-string"}},[t._v('"checked"')]),t._v(">")]),t._v("\n Checkbox\n"),e("span",{attrs:{class:"hljs-tag"}},[t._v("</"),e("span",{attrs:{class:"hljs-name"}},[t._v("cube-checkbox")]),t._v(">")]),t._v("\n")])]),t._v(" "),e("p",[t._v("If selected, the value of "),e("code",{pre:!0},[t._v("checked")]),t._v(" is "),e("code",{pre:!0},[t._v("true")]),t._v(".")])]),t._v(" "),e("li",[e("p",[t._v("Styled checkbox")]),t._v(" "),e("pre",{pre:!0},[e("code",{attrs:{"v-pre":"",class:"language-html"}},[e("span",{attrs:{class:"hljs-tag"}},[t._v("<"),e("span",{attrs:{class:"hljs-name"}},[t._v("cube-checkbox")]),t._v(" "),e("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),e("span",{attrs:{class:"hljs-string"}},[t._v('"checked"')]),t._v(" "),e("span",{attrs:{class:"hljs-attr"}},[t._v("position")]),t._v("="),e("span",{attrs:{class:"hljs-string"}},[t._v('"right"')]),t._v(" "),e("span",{attrs:{class:"hljs-attr"}},[t._v("shape")]),t._v("="),e("span",{attrs:{class:"hljs-string"}},[t._v('"square"')]),t._v(" "),e("span",{attrs:{class:"hljs-attr"}},[t._v(":hollow-style")]),t._v("="),e("span",{attrs:{class:"hljs-string"}},[t._v('"true"')]),t._v(">")]),t._v("\n Styled Checkbox\n"),e("span",{attrs:{class:"hljs-tag"}},[t._v("</"),e("span",{attrs:{class:"hljs-name"}},[t._v("cube-checkbox")]),t._v(">")]),t._v("\n")])]),t._v(" "),e("p",[t._v("If setting "),e("code",{pre:!0},[t._v("position")]),t._v(" to "),e("code",{pre:!0},[t._v("'right'")]),t._v(", the position of the checkbox's icon is on the right. And you could use "),e("code",{pre:!0},[t._v("shape")]),t._v(" to configure the shape of icon, set "),e("code",{pre:!0},[t._v("hollow-style=true")]),t._v(" to use hollow-out style.")])]),t._v(" "),e("li",[e("p",[t._v("Change the value of model")]),t._v(" "),e("pre",{pre:!0},[e("code",{attrs:{"v-pre":"",class:"language-html"}},[e("span",{attrs:{class:"hljs-tag"}},[t._v("<"),e("span",{attrs:{class:"hljs-name"}},[t._v("cube-checkbox")]),t._v(" "),e("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),e("span",{attrs:{class:"hljs-string"}},[t._v('"checked"')]),t._v(" "),e("span",{attrs:{class:"hljs-attr"}},[t._v(":option")]),t._v("="),e("span",{attrs:{class:"hljs-string"}},[t._v('"option"')]),t._v(" />")]),t._v("\n")])]),t._v(" "),e("pre",{pre:!0},[e("code",{attrs:{"v-pre":"",class:"language-js"}},[e("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),e("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n data() {\n "),e("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),e("span",{attrs:{class:"hljs-attr"}},[t._v("checked")]),t._v(": "),e("span",{attrs:{class:"hljs-literal"}},[t._v("false")]),t._v(",\n "),e("span",{attrs:{class:"hljs-attr"}},[t._v("option")]),t._v(": {\n "),e("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),e("span",{attrs:{class:"hljs-string"}},[t._v("'Option Checkbox'")]),t._v(",\n "),e("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),e("span",{attrs:{class:"hljs-string"}},[t._v("'optionValue'")]),t._v(",\n "),e("span",{attrs:{class:"hljs-attr"}},[t._v("disabled")]),t._v(": "),e("span",{attrs:{class:"hljs-literal"}},[t._v("false")]),t._v("\n }\n }\n }\n}\n")])]),t._v(" "),e("p",[t._v("If "),e("code",{pre:!0},[t._v("option")]),t._v(" is setted, and when the checkbox is selected, the value of "),e("code",{pre:!0},[t._v("checked")]),t._v(" is "),e("code",{pre:!0},[t._v("'optionValue'")]),t._v(". When not selected, the value is "),e("code",{pre:!0},[t._v("false")]),t._v("; Therefore, in circumstances of single checkbox, better not set "),e("code",{pre:!0},[t._v("option")]),t._v(".")])]),t._v(" "),e("li",[e("p",[t._v("Disabled state")]),t._v(" "),e("pre",{pre:!0},[e("code",{attrs:{"v-pre":"",class:"language-html"}},[e("span",{attrs:{class:"hljs-tag"}},[t._v("<"),e("span",{attrs:{class:"hljs-name"}},[t._v("cube-checkbox")]),t._v(" "),e("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),e("span",{attrs:{class:"hljs-string"}},[t._v('"checked"')]),t._v(" "),e("span",{attrs:{class:"hljs-attr"}},[t._v(":option")]),t._v("="),e("span",{attrs:{class:"hljs-string"}},[t._v('"{disabled: true}"')]),t._v(">")]),t._v("\n Disabled Checkbox\n"),e("span",{attrs:{class:"hljs-tag"}},[t._v("</"),e("span",{attrs:{class:"hljs-name"}},[t._v("cube-checkbox")]),t._v(">")]),t._v("\n")])])])])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("table",[e("thead",[e("tr",[e("th",[t._v("Attribute")]),t._v(" "),e("th",[t._v("Description")]),t._v(" "),e("th",[t._v("Type")]),t._v(" "),e("th",[t._v("Accepted Values")]),t._v(" "),e("th",[t._v("Default")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[t._v("option")]),t._v(" "),e("td",[t._v("option value")]),t._v(" "),e("td",[t._v("Boolean/String/Object")]),t._v(" "),e("td",[t._v("-")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("position")]),t._v(" "),e("td",[t._v("icon position")]),t._v(" "),e("td",[t._v("String")]),t._v(" "),e("td",[t._v("left/right")]),t._v(" "),e("td",[t._v("left")])]),t._v(" "),e("tr",[e("td",[t._v("shape")]),t._v(" "),e("td",[t._v("icon shape")]),t._v(" "),e("td",[t._v("String")]),t._v(" "),e("td",[t._v("circle/square")]),t._v(" "),e("td",[t._v("circle")])]),t._v(" "),e("tr",[e("td",[t._v("hollowStyle")]),t._v(" "),e("td",[t._v("whether is hollow-out style")]),t._v(" "),e("td",[t._v("Boolean")]),t._v(" "),e("td",[t._v("true/false")]),t._v(" "),e("td",[t._v("false")])])])])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("ul",[e("li",[e("code",{pre:!0},[t._v("option")]),t._v(" sub configuration")])])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("table",[e("thead",[e("tr",[e("th",[t._v("Attribute")]),t._v(" "),e("th",[t._v("Description")]),t._v(" "),e("th",[t._v("Type")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[t._v("label")]),t._v(" "),e("td",[t._v("the text of label")]),t._v(" "),e("td",[t._v("String")])]),t._v(" "),e("tr",[e("td",[t._v("value")]),t._v(" "),e("td",[t._v("the value of checkbox item")]),t._v(" "),e("td",[t._v("String/Number")])]),t._v(" "),e("tr",[e("td",[t._v("disabled")]),t._v(" "),e("td",[t._v("whether the checkbox item is disabled")]),t._v(" "),e("td",[t._v("Boolean")])])])])}]}},nejK:function(t,s,e){var a=e("VU/8")(null,e("V4w7"),null,null,null);t.exports=a.exports}});
\ No newline at end of file
!function(e){function c(f){if(a[f])return a[f].exports;var d=a[f]={i:f,l:!1,exports:{}};return e[f].call(d.exports,d,d.exports,c),d.l=!0,d.exports}var f=window.webpackJsonp;window.webpackJsonp=function(a,b,n){for(var r,t,o,u=0,i=[];u<a.length;u++)t=a[u],d[t]&&i.push(d[t][0]),d[t]=0;for(r in b)Object.prototype.hasOwnProperty.call(b,r)&&(e[r]=b[r]);for(f&&f(a,b,n);i.length;)i.shift()();if(n)for(u=0;u<n.length;u++)o=c(c.s=n[u]);return o};var a={},d={92:0};c.e=function(e){function f(){r.onerror=r.onload=null,clearTimeout(t);var c=d[e];0!==c&&(c&&c[1](new Error("Loading chunk "+e+" failed.")),d[e]=void 0)}var a=d[e];if(0===a)return new Promise(function(e){e()});if(a)return a[2];var b=new Promise(function(c,f){a=d[e]=[c,f]});a[2]=b;var n=document.getElementsByTagName("head")[0],r=document.createElement("script");r.type="text/javascript",r.charset="utf-8",r.async=!0,r.timeout=12e4,c.nc&&r.setAttribute("nonce",c.nc),r.src=c.p+"js/"+e+"."+{0:"d5ce8696d7817c1ad3a3",1:"34b5857f194e5f1acfb6",2:"3e50a03b0be017a6977f",3:"0a2551dfcd5d9f8f9191",4:"415f17002e53bbea6722",5:"df54f9daf110a907159b",6:"895522cc1e070b001975",7:"c3739851037aee6b6a6e",8:"9679779de06fa2c203a5",9:"8137f254b1460b481558",10:"a3e343bed9758474747b",11:"fca8be0d3e957f0d81cc",12:"599c6a91b0e604847757",13:"238568fdec73355962fb",14:"c3cc516b23ecc8d821aa",15:"f8a45a0f1c77686ee9c1",16:"83d41e7b1a92ce761e7d",17:"9eb9d6f95850e8c53330",18:"8582310842dae1c00da6",19:"3a57986f0e15a54ba71a",20:"32b5f56ad8727fdf2c25",21:"5a95626f892944ce441b",22:"76d1cc9526f2ae5e19d2",23:"eeb670ddd074c8a68a4b",24:"d8c9af86b0c205fdbca7",25:"75f0c5858eed1c99d073",26:"944918111d93260e16fd",27:"a5e41e99a16c6d7b0c2e",28:"5d0fb560727f728261fa",29:"6fce2ed27f2e45fb5bfb",30:"cd6b829ec11d765570f8",31:"d5375d0714c5c6b6c795",32:"173ebb8cd190932aff17",33:"b805b6e41b833f2ce21b",34:"df81c601a2da7e8385db",35:"68f54e21280ee7f97fa6",36:"00882f4cbb972ff6819d",37:"39dfed65002c033241fd",38:"9319d39773ae02b28ba6",39:"f0e32f2cdbcbcc49ebed",40:"f447330bb31995040433",41:"80054a1a8570a4c2bacd",42:"ce22447419f904fd348d",43:"a3e3e5bdd4d693327596",44:"fbf2c29f6f7b3b88e598",45:"f7802cae52d1d1924143",46:"f681beea5f4cc99f1744",47:"22f5760abc5c3e243bec",48:"a36891629c00d6f8a889",49:"c5e3fe022592cf6dc56b",50:"3d96fe342ed4e29b6a05",51:"c2f6f9f686b634a848e7",52:"e08232628e093d3480c2",53:"68bb042ea9c1165a1457",54:"bc8da7a464da191626e3",55:"f41c38f947f4a815f293",56:"55d2cfad4d4c0f7d0a6c",57:"b54d8bf5952d902821bc",58:"07ae54abd32f29bcc1a3",59:"2dc0d02b9ff1f2e032e1",60:"600bdd969016d8a9def7",61:"53f93e04b22346397731",62:"7e89537102c88edaabaa",63:"23e06d8f7966d53c3529",64:"698c50c0b9a41e0cc802",65:"d243961bd06b84991adb",66:"1e39415dabd761c15c2c",67:"bd23f1fd6d0a6350c4d6",68:"bfd5e91d6878a1192f76",69:"5dc6b9edbcb2536cf844",70:"0755f03a21ab1c0caeee",71:"dfa5d8617036381ae45d",72:"47f5c74f8f49547a4ad2",73:"564344b473a25504e63e",74:"5e9069fc40101ed974ec",75:"d3ffb968fb80aa7183dd",76:"f87b324e1d3e871c2ead",77:"5c1c6e154e38e04d3d57",78:"81e018e767699ec8bf9e",79:"c39caf9e02a62c49ad74",80:"0d03ab5735f1f209dde9",81:"abbfa65b85447bc04bbd",82:"6f87e32f655c431a46db",83:"bc55a808e33b4ee10bdd",84:"a57bfe08ad16e2a154bd",85:"ea16ecd41cb7afd63e93",86:"870007f307a60da65b57",87:"2259ffea6b1f7fce6c4b",88:"e2011e0ef243665ec4a2",89:"337e8687612e7d07548d"}[e]+".js";var t=setTimeout(f,12e4);return r.onerror=r.onload=f,n.appendChild(r),b},c.m=e,c.c=a,c.d=function(e,f,a){c.o(e,f)||Object.defineProperty(e,f,{configurable:!1,enumerable:!0,get:a})},c.n=function(e){var f=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(f,"a",f),f},c.o=function(e,c){return Object.prototype.hasOwnProperty.call(e,c)},c.p="/cube-ui/",c.oe=function(e){throw console.error(e),e}}([]);
\ No newline at end of file
!function(e){function c(f){if(a[f])return a[f].exports;var d=a[f]={i:f,l:!1,exports:{}};return e[f].call(d.exports,d,d.exports,c),d.l=!0,d.exports}var f=window.webpackJsonp;window.webpackJsonp=function(a,b,n){for(var r,t,o,u=0,i=[];u<a.length;u++)t=a[u],d[t]&&i.push(d[t][0]),d[t]=0;for(r in b)Object.prototype.hasOwnProperty.call(b,r)&&(e[r]=b[r]);for(f&&f(a,b,n);i.length;)i.shift()();if(n)for(u=0;u<n.length;u++)o=c(c.s=n[u]);return o};var a={},d={92:0};c.e=function(e){function f(){r.onerror=r.onload=null,clearTimeout(t);var c=d[e];0!==c&&(c&&c[1](new Error("Loading chunk "+e+" failed.")),d[e]=void 0)}var a=d[e];if(0===a)return new Promise(function(e){e()});if(a)return a[2];var b=new Promise(function(c,f){a=d[e]=[c,f]});a[2]=b;var n=document.getElementsByTagName("head")[0],r=document.createElement("script");r.type="text/javascript",r.charset="utf-8",r.async=!0,r.timeout=12e4,c.nc&&r.setAttribute("nonce",c.nc),r.src=c.p+"js/"+e+"."+{0:"d5ce8696d7817c1ad3a3",1:"34b5857f194e5f1acfb6",2:"3e50a03b0be017a6977f",3:"0a2551dfcd5d9f8f9191",4:"415f17002e53bbea6722",5:"df54f9daf110a907159b",6:"895522cc1e070b001975",7:"c3739851037aee6b6a6e",8:"9679779de06fa2c203a5",9:"8137f254b1460b481558",10:"a3e343bed9758474747b",11:"fca8be0d3e957f0d81cc",12:"599c6a91b0e604847757",13:"238568fdec73355962fb",14:"c3cc516b23ecc8d821aa",15:"f8a45a0f1c77686ee9c1",16:"83d41e7b1a92ce761e7d",17:"9eb9d6f95850e8c53330",18:"8582310842dae1c00da6",19:"3a57986f0e15a54ba71a",20:"32b5f56ad8727fdf2c25",21:"5a95626f892944ce441b",22:"76d1cc9526f2ae5e19d2",23:"eeb670ddd074c8a68a4b",24:"d8c9af86b0c205fdbca7",25:"75f0c5858eed1c99d073",26:"944918111d93260e16fd",27:"a5e41e99a16c6d7b0c2e",28:"5d0fb560727f728261fa",29:"6fce2ed27f2e45fb5bfb",30:"cd6b829ec11d765570f8",31:"d5375d0714c5c6b6c795",32:"173ebb8cd190932aff17",33:"b805b6e41b833f2ce21b",34:"df81c601a2da7e8385db",35:"68f54e21280ee7f97fa6",36:"00882f4cbb972ff6819d",37:"39dfed65002c033241fd",38:"9319d39773ae02b28ba6",39:"f0e32f2cdbcbcc49ebed",40:"b028a32d64620229afae",41:"80054a1a8570a4c2bacd",42:"ce22447419f904fd348d",43:"a3e3e5bdd4d693327596",44:"fbf2c29f6f7b3b88e598",45:"f7802cae52d1d1924143",46:"f681beea5f4cc99f1744",47:"22f5760abc5c3e243bec",48:"a36891629c00d6f8a889",49:"c5e3fe022592cf6dc56b",50:"3d96fe342ed4e29b6a05",51:"c2f6f9f686b634a848e7",52:"e08232628e093d3480c2",53:"68bb042ea9c1165a1457",54:"bc8da7a464da191626e3",55:"f41c38f947f4a815f293",56:"55d2cfad4d4c0f7d0a6c",57:"b54d8bf5952d902821bc",58:"07ae54abd32f29bcc1a3",59:"2dc0d02b9ff1f2e032e1",60:"600bdd969016d8a9def7",61:"53f93e04b22346397731",62:"7e89537102c88edaabaa",63:"23e06d8f7966d53c3529",64:"698c50c0b9a41e0cc802",65:"d243961bd06b84991adb",66:"1e39415dabd761c15c2c",67:"bd23f1fd6d0a6350c4d6",68:"bfd5e91d6878a1192f76",69:"5dc6b9edbcb2536cf844",70:"0755f03a21ab1c0caeee",71:"dfa5d8617036381ae45d",72:"47f5c74f8f49547a4ad2",73:"564344b473a25504e63e",74:"5e9069fc40101ed974ec",75:"d3ffb968fb80aa7183dd",76:"f87b324e1d3e871c2ead",77:"5c1c6e154e38e04d3d57",78:"81e018e767699ec8bf9e",79:"c39caf9e02a62c49ad74",80:"0d03ab5735f1f209dde9",81:"abbfa65b85447bc04bbd",82:"6f87e32f655c431a46db",83:"bc55a808e33b4ee10bdd",84:"4a47d5e095290cb5e25d",85:"ea16ecd41cb7afd63e93",86:"870007f307a60da65b57",87:"2259ffea6b1f7fce6c4b",88:"e2011e0ef243665ec4a2",89:"337e8687612e7d07548d"}[e]+".js";var t=setTimeout(f,12e4);return r.onerror=r.onload=f,n.appendChild(r),b},c.m=e,c.c=a,c.d=function(e,f,a){c.o(e,f)||Object.defineProperty(e,f,{configurable:!1,enumerable:!0,get:a})},c.n=function(e){var f=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(f,"a",f),f},c.o=function(e,c){return Object.prototype.hasOwnProperty.call(e,c)},c.p="/cube-ui/",c.oe=function(e){throw console.error(e),e}}([]);
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册