36.c1a6541b1f2a282d9ce1.js

webpackJsonp([36],{C70t: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:"Drawer"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Drawer-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(" Drawer")]),s._v(" "),s._m(0),s._v(" "),a("p",[s._v("抽屉，主要用来需要大范围层级进行选择的场景，一般情况下应该是满屏状态。")]),s._v(" "),s._m(1),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(2),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(" "),a("h4",{attrs:{id:"CubeDrawer"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-CubeDrawer-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(" CubeDrawer")]),s._v(" "),s._m(3),s._v(" "),s._m(4),s._v(" "),a("h4",{attrs:{id:"CubeDrawerPanel"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-CubeDrawerPanel-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(" CubeDrawerPanel")]),s._v(" "),s._m(5),s._v(" "),a("h4",{attrs:{id:"CubeDrawerItem"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-CubeDrawerItem-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(" CubeDrawerItem")]),s._v(" "),s._m(6),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(7),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(8)])},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("blockquote",[a("p",[s._v("1.7.0 新增")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("strong",[s._v("注：")]),s._v(" 组件依赖父容器相对定位或者绝对定位，因为 Drawer 是绝对定位的。")])},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-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"showDrawer"')]),s._v(">")]),s._v("Show Drawer"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-button")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-drawer")]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"drawer"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"请选择"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"data"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":selected-index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"selectedIndex"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"changeHandler"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@select")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"selectHandler"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@cancel")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"cancelHandler"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-drawer")]),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("import")]),s._v(" { provinceList, cityList, areaList } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'../../data/area'")]),s._v("\n"),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("selectedIndex")]),s._v(": [],\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": [\n        provinceList,\n        [],\n        []\n      ]\n    }\n  },\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n    showDrawer() {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.drawer.show()\n    },\n    changeHandler(index, item, selectedVal, selectedIndex, selectedText) {\n      "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// fake request")]),s._v("\n      setTimeout("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n        "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" data\n        "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (index === "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(") {\n          "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// procince change, get city data")]),s._v("\n          data = cityList[item.value]\n        } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n          "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// city change, get area data")]),s._v("\n          data = areaList[item.value]\n        }\n        "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// refill panel(index + 1) data")]),s._v("\n        "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.drawer.refill(index + "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(", data)\n      }, "),a("span",{attrs:{class:"hljs-number"}},[s._v("200")]),s._v(")\n    },\n    selectHandler(selectedVal, selectedIndex, selectedText) {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createDialog({\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'warn'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("`Selected Item: <br/> - value: "),a("span",{attrs:{class:"hljs-subst"}},[s._v("${selectedVal.join("),a("span",{attrs:{class:"hljs-string"}},[s._v("', '")]),s._v(")}")]),s._v(" <br/> - index: "),a("span",{attrs:{class:"hljs-subst"}},[s._v("${selectedIndex.join("),a("span",{attrs:{class:"hljs-string"}},[s._v("', '")]),s._v(")}")]),s._v(" <br/> - text: "),a("span",{attrs:{class:"hljs-subst"}},[s._v("${selectedText.join("),a("span",{attrs:{class:"hljs-string"}},[s._v("' '")]),s._v(")}")]),s._v("`")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-alert'")]),s._v("\n      }).show()\n    },\n    cancelHandler() {\n      "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("'cancel'")]),s._v(")\n    }\n  }\n}\n")])]),s._v(" "),a("p",[a("code",{pre:!0},[s._v("title")]),s._v(" 就是标题，可选；"),a("code",{pre:!0},[s._v("data")]),s._v(" 数据源，二维数组，长度决定了抽屉的 Panel 数，初始长度一定要确定；"),a("code",{pre:!0},[s._v("selected-index")]),s._v(" 则是初始选择的索引值；"),a("code",{pre:!0},[s._v("change")]),s._v("、"),a("code",{pre:!0},[s._v("select")]),s._v("、"),a("code",{pre:!0},[s._v("cancel")]),s._v(" 则是对应的三个事件：选择发生改变（选中是非最后一个 Panel 中的项的时候触发）、选中了某个值（选择了最后一个 Panel 中的项触发）、取消（点击左侧空白蒙层触发）。")]),s._v(" "),a("p",[s._v("你可以在 "),a("code",{pre:!0},[s._v("change")]),s._v(" 中通过 Drawer 的 "),a("code",{pre:!0},[s._v("fill")]),s._v(" 方法更新下一个 Panel 的数据，可以是同步更新也可以是异步更新。")])]),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-drawer")]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"drawer"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"data"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":selected-index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"selectedIndex"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"changeHandler"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@select")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"selectHandler"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@cancel")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"cancelHandler"')]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("{{province.text}}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-drawer-panel")]),s._v("\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"(panel, index) in data"')]),s._v("\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"index"')]),s._v("\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"index"')]),s._v("\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"panel"')]),s._v("\n  >")]),s._v("\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-drawer-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"(item, i) in panel"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":item")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"i"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"i"')]),s._v(">")]),s._v("\n      "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"cubeic-round-border"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n      "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("{{item.text}}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-drawer-item")]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-drawer-panel")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-drawer")]),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("import")]),s._v(" { provinceList, cityList, areaList } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'../../data/area'")]),s._v("\n"),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("province")]),s._v(": {},\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("selectedIndex")]),s._v(": [],\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": [\n        [],\n        []\n      ]\n    }\n  },\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n    showDrawer() {\n      "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// get radom province")]),s._v("\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" randomIndex = "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Math")]),s._v(".round("),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Math")]),s._v(".random() * provinceList.length)\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" randomProvince = provinceList[randomIndex]\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".province = randomProvince\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.drawer.refill("),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(", cityList[randomProvince.value])\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.drawer.show()\n    },\n    changeHandler(index, item, selectedVal, selectedIndex, selectedText) {\n      setTimeout("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n        "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// city change, get area data")]),s._v("\n        "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" data = areaList[item.value]\n        "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.drawer.refill(index + "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(", data)\n      }, "),a("span",{attrs:{class:"hljs-number"}},[s._v("200")]),s._v(")\n    },\n    selectHandler(selectedVal, selectedIndex, selectedText) {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createDialog({\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'warn'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("`Selected Item: <br/> - value: "),a("span",{attrs:{class:"hljs-subst"}},[s._v("${selectedVal.join("),a("span",{attrs:{class:"hljs-string"}},[s._v("', '")]),s._v(")}")]),s._v(" <br/> - index: "),a("span",{attrs:{class:"hljs-subst"}},[s._v("${selectedIndex.join("),a("span",{attrs:{class:"hljs-string"}},[s._v("', '")]),s._v(")}")]),s._v(" <br/> - text: "),a("span",{attrs:{class:"hljs-subst"}},[s._v("${selectedText.join("),a("span",{attrs:{class:"hljs-string"}},[s._v("' '")]),s._v(")}")]),s._v("`")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-alert'")]),s._v("\n      }).show()\n    },\n    cancelHandler() {\n      "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("'cancel'")]),s._v(")\n    }\n  }\n}\n")])]),s._v(" "),a("p",[s._v("可以在 "),a("code",{pre:!0},[s._v("cube-drawer")]),s._v(" 组件中使用 "),a("code",{pre:!0},[s._v("cube-drawer-panel")]),s._v(" 以及 "),a("code",{pre:!0},[s._v("cube-drawer-item")]),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("th",[s._v("可选值")]),s._v(" "),a("th",[s._v("默认值")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("title")]),s._v(" "),a("td",[s._v("标题")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("''")])]),s._v(" "),a("tr",[a("td",[s._v("data")]),s._v(" "),a("td",[s._v("数据源")]),s._v(" "),a("td",[s._v("Array")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("[]")])]),s._v(" "),a("tr",[a("td",[s._v("selectedIndex")]),s._v(" "),a("td",[s._v("初始选择索引")]),s._v(" "),a("td",[s._v("Array")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("[]")])]),s._v(" "),a("tr",[a("td",[s._v("visible"),a("sup",[s._v("1.8.1")])]),s._v(" "),a("td",[s._v("显示状态，是否可见。"),a("code",{pre:!0},[s._v("v-model")]),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("p",[a("code",{pre:!0},[s._v("data")]),s._v(" 子配置项")]),s._v(" "),a("p",[s._v("是一个数组，数组中每一项仍然为数组，结构类似于：")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[s._v("[\n  [\n    {\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'text'")]),s._v(",\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'value'")]),s._v("\n    },\n    ...\n  ],\n  [\n    "),a("span",{attrs:{class:"hljs-string"}},[s._v("'text'")]),s._v(",\n    "),a("span",{attrs:{class:"hljs-string"}},[s._v("'text2'")]),s._v(",\n    ...\n  ]\n]\n")])]),s._v(" "),a("p",[s._v("里层数组的每一项可以是对象（包含 text 和 value），也可以是纯字符串。")])])])},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("data")]),s._v(" "),a("td",[s._v("数据源")]),s._v(" "),a("td",[s._v("Array")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("[]")])]),s._v(" "),a("tr",[a("td",[s._v("index")]),s._v(" "),a("td",[s._v("该数据源在 CubeDrawer 的 data 中的索引值")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("-1")])])])])},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("data")]),s._v(" "),a("td",[s._v("数据项")]),s._v(" "),a("td",[s._v("String/Object")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("''")])]),s._v(" "),a("tr",[a("td",[s._v("index")]),s._v(" "),a("td",[s._v("该数据项在 CubeDrawerPanel 的 data 中的索引值")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("-1")])])])])},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("参数1")]),s._v(" "),a("th",[s._v("参数2")]),s._v(" "),a("th",[s._v("参数3")]),s._v(" "),a("th",[s._v("参数4")]),s._v(" "),a("th",[s._v("参数5")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("change")]),s._v(" "),a("td",[s._v("选择发生改变（选中是非最后一个 Panel 中的项的时候触发）")]),s._v(" "),a("td",[s._v("发生改变的 Panel 的索引")]),s._v(" "),a("td",[s._v("发生改变的数据项")]),s._v(" "),a("td",[s._v("已选中的值集合")]),s._v(" "),a("td",[s._v("已选中的索引集合")]),s._v(" "),a("td",[s._v("已选中的文本集合")])]),s._v(" "),a("tr",[a("td",[s._v("select")]),s._v(" "),a("td",[s._v("选择了最后一个 Panel 中的项触发")]),s._v(" "),a("td",[s._v("已选中的值集合")]),s._v(" "),a("td",[s._v("已选中的索引集合")]),s._v(" "),a("td",[s._v("已选中的文本集合")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("cancel")]),s._v(" "),a("td",[s._v("点击左侧空白区域触发")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[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("参数1")]),s._v(" "),a("th",[s._v("参数2")]),s._v(" "),a("th",[s._v("参数3")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("refill")]),s._v(" "),a("td",[s._v("填充数据，改变某个 Panel 数据")]),s._v(" "),a("td",[s._v("要改变的 Panel 的索引")]),s._v(" "),a("td",[s._v("填充数据")]),s._v(" "),a("td",[s._v("默认选中项（可选，建议不填）")])]),s._v(" "),a("tr",[a("td",[s._v("show")]),s._v(" "),a("td",[s._v("显示")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("hide")]),s._v(" "),a("td",[s._v("隐藏")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("-")])])])])}]}},cb3f:function(s,t,a){var v=a("VU/8")(null,a("C70t"),null,null,null);s.exports=v.exports},e4wh:function(s,t,a){s.exports=a("cb3f")}});