text: webpackJsonp([43],{kh0H:function(s,t,a){s.exports=a("o77T")},o77T:function(s,t,a){var v=a("VU/8")(null,a("wQM9"),null,null,null);s.exports=v.exports},wQM9: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:"CascadePicker组件"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-CascadePicker组件-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(" CascadePicker组件")]),s._v(" "),s._m(0),s._v(" "),s._m(1),s._v(" "),s._m(2),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(3),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(4),s._v(" "),s._m(5),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.2.0 新增")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("CascadePicker")]),s._v("组件是级联选择器，用于实现多列选择之间的级联变化。比如，在选择省市区时，当省切换到了江苏省，城市列应该变成江苏省的各个城市，同理，如果城市切换到苏州市，区列的选项也应变成苏州市的各个区，这就级联的意义。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("strong",[s._v("注：")]),s._v(" 由于此组件基于 create-api 实现，所以在使用之前，请确保自己了解过 "),a("a",{attrs:{href:"#/zh-CN/docs/create-api"}},[s._v("create-api")]),s._v("。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("p",[s._v("基本用法")]),s._v(" "),a("p",[s._v("相比普通选择器，级联选择器需要传入的数据结构是不一样的。普通选择器的数据结构是一个二维数组，每一列对应一个固定的数组，而级联选择器，则需要传入的是一个树形结构，第一列数组的每个选项的children属性，对应着切换到该选项时后续列的数据，从而实现对后续列的改变。如下所示：")]),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('"showCascadePicker"')]),s._v(">")]),s._v("Cascade Picker"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-button")]),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("const")]),s._v(" cascadeData = [\n  {\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Fruit'")]),s._v(",\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Fruit'")]),s._v(",\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [\n      {\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Apple'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Apple'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{ "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'One'")]),s._v(" }, { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Two'")]),s._v(" }]\n      },\n      {\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Orange'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Orange'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{ "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("3")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Three'")]),s._v("}, { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("4")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Four'")]),s._v(" }]\n      }\n    ]\n  },\n  {\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Drink'")]),s._v(",\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Drink'")]),s._v(",\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [\n      {\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Coffee'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Coffee'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{ "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'One'")]),s._v(" }, { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Two'")]),s._v(" }]\n      },\n      {\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tea'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tea'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{ "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'One'")]),s._v(" }, { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("3")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Three'")]),s._v("}]\n      }\n    ]\n  }\n]\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n  mounted () {\n    "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".cascadePicker = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createCascadePicker({\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Cascade Picker'")]),s._v(",\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": cascadeData,\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("selectedIndex")]),s._v(": ["),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("],\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("onSelect")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".selectHandle,\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("onCancel")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".cancelHandle\n    })\n  },\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n    showCascadePicker() {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".cascadePicker.show()\n    },\n    selectHandle(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    cancelHandle() {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createToast({\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'correct'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("txt")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Picker canceled'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("time")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v("\n      }).show()\n    }\n  }\n}\n")])]),s._v(" "),a("p",[s._v("当第一列选中"),a("code",{pre:!0},[s._v("Fruit")]),s._v("时，第二列的选项是"),a("code",{pre:!0},[s._v("Apple")]),s._v("、"),a("code",{pre:!0},[s._v("Orange")]),s._v("。以此类推，当第二列选中"),a("code",{pre:!0},[s._v("Orange")]),s._v("时，第三列的选项是"),a("code",{pre:!0},[s._v("Three")]),s._v("、"),a("code",{pre:!0},[s._v("Four")]),s._v("。")])]),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-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"showAddressPicker"')]),s._v(">")]),s._v("Address Picker"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-button")]),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("'example/data/area'")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" addressData = provinceList\naddressData.forEach("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("province")]),s._v(" =>")]),s._v(" {\n  province.children = cityList[province.value]\n  province.children.forEach("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("city")]),s._v(" =>")]),s._v(" {\n    city.children = areaList[city.value]\n  })\n})\n\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n  mounted () {\n    "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".addressPicker = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createCascadePicker({\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'City Picker'")]),s._v(",\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": addressData,\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("onSelect")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".selectHandle,\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("onCancel")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".cancelHandle\n    })\n  },\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n    showAddressPicker() {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".addressPicker.show()\n    },\n    selectHandle(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    cancelHandle() {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createToast({\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'correct'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("txt")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Picker canceled'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("time")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v("\n      }).show()\n    }\n  }\n}\n")])])]),s._v(" "),a("li",[a("p",[s._v("实例方法 "),a("code",{pre:!0},[s._v("setData")])]),s._v(" "),a("p",[a("code",{pre:!0},[s._v("setData")]),s._v("方法，用于重置"),a("code",{pre:!0},[s._v("CascadePicker")]),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('"showSetDataPicker"')]),s._v(">")]),s._v("SetData Picker"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-button")]),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  mounted () {\n    "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".setDataPicker = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createCascadePicker({\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Set Data'")]),s._v(",\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("onSelect")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".selectHandle,\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("onCancel")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".cancelHandle\n    })\n  },\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n    showSetDataPicker() {\n      "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// setData when the picker is invisible.")]),s._v("\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".setDataPicker.setData(cascadeData)\n\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".setDataPicker.show()\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("// setData when the picker is visible.")]),s._v("\n        "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".setDataPicker.setData(addressData, ["),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("])\n      }, "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(")\n    },\n    selectHandle(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    cancelHandle() {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createToast({\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'correct'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("txt")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Picker canceled'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("time")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v("\n      }).show()\n    }\n  }\n}\n")])])]),s._v(" "),a("li",[a("p",[s._v("异步加载数据")]),s._v(" "),a("p",[s._v("当数据量太大时，可能难以在最开始就生成完整的级联数据树。这时，你可以配置 "),a("code",{pre:!0},[s._v("async")]),s._v(" 属性开启异步加载级联数据，在 "),a("code",{pre:!0},[s._v("change")]),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('"showAsyncPicker"')]),s._v(">")]),s._v("Async Load Data"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-button")]),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("'example/data/area'")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" asyncData = provinceList\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" asyncSelectedIndex = ["),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("]\nasyncData["),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("].children = cityList[asyncData["),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("].value]\nasyncData["),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("].children["),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("].children = areaList[asyncData["),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("].children["),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("].value]\n\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n  mounted () {\n    "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".asyncPicker = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createCascadePicker({\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Async Load Data'")]),s._v(",\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("async")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": asyncData,\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("selectedIndex")]),s._v(": asyncSelectedIndex.slice(),\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("onSelect")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".selectHandle,\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("onCancel")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".cancelHandle,\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("onChange")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".asyncChangeHandle\n    })\n  },\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n    showAsyncPicker() {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".asyncPicker.show()\n    },\n    asyncChangeHandle(i, newIndex) {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (newIndex !== asyncSelectedIndex[i]) {\n        asyncSelectedIndex[i] = newIndex\n        "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// If the first two column is changed, request the data for rest columns.")]),s._v("\n        "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (i < "),a("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v(") {\n          "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// Mock async load.")]),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("if")]),s._v(" (i === "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(") {\n              "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" current = asyncData[newIndex]\n              current.children = current.children || cityList[current.value]\n              current.children["),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("].children = current.children["),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("].children || areaList[current.children["),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("].value]\n              asyncSelectedIndex["),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("] = "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n              asyncSelectedIndex["),a("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v("] = "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n            }\n\n            "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (i === "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(") {\n              "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" current = asyncData[asyncSelectedIndex["),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("]].children[newIndex]\n              current.children = current.children || areaList[current.value]\n              asyncSelectedIndex["),a("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v("] = "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n            }\n            "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".asyncPicker.setData(asyncData, asyncSelectedIndex)\n          }, "),a("span",{attrs:{class:"hljs-number"}},[s._v("500")]),s._v(")\n        }\n      }\n    },\n    selectHandle(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    cancelHandle() {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createToast({\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'correct'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("txt")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Picker canceled'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("time")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v("\n      }).show()\n    }\n  }\n}\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("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("[1]")])]),s._v(" "),a("tr",[a("td",[s._v("async"),a("sup",[s._v("1.8.1")])]),s._v(" "),a("td",[s._v("异步加载数据")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("false")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),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("subtitle"),a("sup",[s._v("1.8.1")])]),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("cancelTxt")]),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("confirmTxt")]),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("swipeTime")]),s._v(" "),a("td",[s._v("快速滑动选择器滚轮时，惯性滚动动画的时长，单位：ms")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("2500")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("alias")]),s._v(" "),a("td",[s._v("配置"),a("code",{pre:!0},[s._v("value")]),s._v("和"),a("code",{pre:!0},[s._v("text")]),s._v("的别名，用法同"),a("code",{pre:!0},[s._v("Picker")]),s._v("组件")]),s._v(" "),a("td",[s._v("Object")]),s._v(" "),a("td",[s._v("{}")]),s._v(" "),a("td",[s._v("{ value: 'id', text: 'name'}")])]),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("false")]),s._v(" "),a("td",[s._v("false")])]),s._v(" "),a("tr",[a("td",[s._v("maskClosable"),a("sup",[s._v("1.9.6")])]),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("true")])]),s._v(" "),a("tr",[a("td",[s._v("zIndex"),a("sup",[s._v("1.9.6")])]),s._v(" "),a("td",[s._v("样式 z-index 的值")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("100")]),s._v(" "),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("code",{pre:!0},[s._v("data")]),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("text")]),s._v(" "),a("td",[s._v("每个选项展示的文案")]),s._v(" "),a("td",[s._v("String/Number")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("value")]),s._v(" "),a("td",[s._v("每个选项的值")]),s._v(" "),a("td",[s._v("String/Number/Boolean")]),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("select")]),s._v(" "),a("td",[s._v("点击确认按钮触发此事件")]),s._v(" "),a("td",[s._v("selectedVal: 当前选中项每一列的值，Array类型")]),s._v(" "),a("td",[s._v("selectedIndex: 当前选中项每一列的索引，Array类型")]),s._v(" "),a("td",[s._v("selectedText: 当前选中项每一列的文案，Array类型")])]),s._v(" "),a("tr",[a("td",[s._v("change")]),s._v(" "),a("td",[s._v("滚轴滚动后触发此事件")]),s._v(" "),a("td",[s._v("index: 当前滚动列次序，Number类型")]),s._v(" "),a("td",[s._v("selectedIndex: 当前列选中项的索引，Number类型")]),s._v(" "),a("td")]),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")])])])},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("tbody",[a("tr",[a("td",[s._v("setData")]),s._v(" "),a("td",[s._v("重置数据和选中的索引")]),s._v(" "),a("td",[s._v("级联树形数据结构，Array类型")]),s._v(" "),a("td",[s._v("每列选中的索引，Array类型")])]),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("tr",[a("td",[s._v("hide")]),s._v(" "),a("td",[s._v("隐藏")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("-")])])])])}]}}});