13.0cf2c24cfe0b8fb1fe5e.js

webpackJsonp([13],{173:function(t,n,e){"use strict";function i(t){d||e(241)}Object.defineProperty(n,"__esModule",{value:!0});var a=e(187),s=e(227),d=!1,l=e(1),r=i,c=l(a.a,s.a,r,"data-v-bc20c0f6",null);c.options.__file="src\\views\\cascader\\index.vue",c.esModule&&Object.keys(c.esModule).some(function(t){return"default"!==t&&"__"!==t.substr(0,2)}),c.options.functional,n.default=c.exports},187:function(t,n,e){"use strict";n.a={data:function(){return{level:"",data:[{title:"步骤1",id:"1",isShowChildren:!1,children:[{title:"步骤211",id:"211",active:!1}]},{title:"步骤2",id:"2",isShowChildren:!1,children:[{title:"步骤21",id:"21",isShowChildren:!1,children:[{title:"步骤211",id:"211",isShowChildren:!1},{title:"步骤212",id:"212",isShowChildren:!1}]},{title:"步骤22",id:"22",isShowChildren:!1,children:[{title:"步骤221",id:"221",isShowChildren:!1}]},{title:"步骤23",id:"23",isShowChildren:!1}]},{title:"步骤3",id:"3",isShowChildren:!1},{title:"步骤5",id:"3",isShowChildren:!1,children:[{title:"步骤51",id:"51",isShowChildren:!1}]}],value:["步骤2","步骤21","步骤212"],id:[]}},methods:{}}},213:function(t,n,e){n=t.exports=e(0)(!0),n.push([t.i,"/*\n  这里定义了整个项目的公共的样式\n */\n/*每一个路由页面的标题样式*/\n.title[data-v-bc20c0f6] {\n  font-size: 24px;\n  color: #99A9BF;\n  margin: 10px;\n}\n/*每一项的标题样式*/\n.title-item[data-v-bc20c0f6] {\n  display: block;\n  border-left: 8px solid #D3DCE6;\n  color: #E5E9F2;\n  font-size: 18px;\n  padding-left: 10px;\n  margin: 8px;\n}\n/*每一个段落的样式*/\n.content-item[data-v-bc20c0f6] {\n  margin: 10px;\n  line-height: 1.5;\n  text-indent: 2em;\n  width: 90%;\n  padding-left: 20px;\n}\n/*去除li的默认样式*/\nul[data-v-bc20c0f6] {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n}\n.btn-group[data-v-bc20c0f6] {\n  margin-bottom: 10px;\n}\n.tr-td[data-v-bc20c0f6] {\n  padding: 10px;\n}\n","",{version:3,sources:["E:/components/componentsDEMO/src/views/cascader/index.vue"],names:[],mappings:"AAAA;;GAEG;AACH,gBAAgB;AAChB;EACE,gBAAgB;EAChB,eAAe;EACf,aAAa;CACd;AACD,YAAY;AACZ;EACE,eAAe;EACf,+BAA+B;EAC/B,eAAe;EACf,gBAAgB;EAChB,mBAAmB;EACnB,YAAY;CACb;AACD,YAAY;AACZ;EACE,aAAa;EACb,iBAAiB;EACjB,iBAAiB;EACjB,WAAW;EACX,mBAAmB;CACpB;AACD,aAAa;AACb;EACE,WAAW;EACX,UAAU;EACV,iBAAiB;CAClB;AACD;EACE,oBAAoB;CACrB;AACD;EACE,cAAc;CACf",file:"index.vue",sourcesContent:["/*\n  这里定义了整个项目的公共的样式\n */\n/*每一个路由页面的标题样式*/\n.title {\n  font-size: 24px;\n  color: #99A9BF;\n  margin: 10px;\n}\n/*每一项的标题样式*/\n.title-item {\n  display: block;\n  border-left: 8px solid #D3DCE6;\n  color: #E5E9F2;\n  font-size: 18px;\n  padding-left: 10px;\n  margin: 8px;\n}\n/*每一个段落的样式*/\n.content-item {\n  margin: 10px;\n  line-height: 1.5;\n  text-indent: 2em;\n  width: 90%;\n  padding-left: 20px;\n}\n/*去除li的默认样式*/\nul {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n}\n.btn-group {\n  margin-bottom: 10px;\n}\n.tr-td {\n  padding: 10px;\n}\n"],sourceRoot:""}])},227:function(t,n,e){"use strict";var i=function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("section",[e("h2",{staticClass:"title"},[t._v("菜单组件 > 级联选择组件")]),t._v(" "),e("h3",{staticClass:"title-item"},[t._v("组件说明")]),t._v(" "),t._m(0),t._v(" "),e("h3",{staticClass:"title-item"},[t._v("示例")]),t._v(" "),e("p",{staticClass:"content-item"},[t._v('\n\t\t实际使用方法如下：\n\t\t<pg-cascader :dataList="data" :value.sync="value" :id.sync="id"></pg-cascader>\n\t\t\n\t')]),t._v(" "),t._m(1),t._v(" "),e("h3",{staticClass:"title-item"},[t._v("效果")]),t._v(" "),e("p",{staticClass:"content-item"},[t._v("\n\t\t效果如下\n\t\t\n\t")]),t._v(" "),e("pg-cascader",{attrs:{dataList:t.data,value:t.value,id:t.id},on:{"update:value":function(n){t.value=n},"update:id":function(n){t.id=n}}},[e("input",{directives:[{name:"model",rawName:"v-model",value:t.value,expression:"value"}],attrs:{type:"text",readonly:""},domProps:{value:t.value},on:{input:function(n){n.target.composing||(t.value=n.target.value)}}})]),t._v(" "),t._m(2)],1)},a=[function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("p",{staticClass:"content-item"},[t._v("\n\t\t在实际的业务之中，级联选择的场景是比较所的，如商品的分类选择等等。本组件的级联选择功能实现最多的级数为三级。此外，本组件还支持小于三级的选择，也就是可以只选择一级或者二级。级联选择的数据结构是一个多维的数组，如下。下一级的数据放在children字段中，如果没有的话，可以为空。本组件同样采用了slot的方式，可以让用户自定义双向绑定数据的内容。每一级选中的那一项的背景为蓝色。\n\t\t"),e("pre",[t._v("\t\t\tdata: [\n\t\t\t\t{\n\t\t\t\t\ttitle: '步骤1',\n\t\t\t\t\tid: '1',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttitle: '步骤2',\n\t\t\t\t\tid: '2',\n\t\t\t\t\tchildren: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttitle: '步骤21',\n\t\t\t\t\t\t\tid: '21',\n\t\t\t\t\t\t\tchildren: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttitle: '步骤211',\n\t\t\t\t\t\t\t\t\tid: '211',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttitle: '步骤212',\n\t\t\t\t\t\t\t\t\tid: '212',\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t]\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttitle: '步骤22',\n\t\t\t\t\t\t\tid: '22',\n\t\t\t\t\t\t\tchildren: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttitle: '步骤221',\n\t\t\t\t\t\t\t\t\tid: '221',\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t]\n\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttitle: '步骤3',\n\t\t\t\t\tid: '3',\n\t\t\t\t}\n\t\t\t]\n\t\t")])])},function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("p",{staticClass:"content-item"},[t._v("\n\t\t可以通过传入value或者id进行初始化，两者的数据类型都是一个数组。\n\t\t例如：\n\t\t"),e("pre",[t._v("\t\t\tid: ['2','22','221']\n\t\t")]),t._v("\n\t\t这样首次打开选择面板的时候，会初始化没一级的选中的选型。\n\t")])},function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("table",[e("tr",[e("td",{staticClass:"tr-td"},[t._v("字段")]),e("td",{staticClass:"tr-td"},[t._v("类型")]),e("td",{staticClass:"tr-td"},[t._v("默认值")])]),t._v(" "),e("tr",[e("td",{staticClass:"tr-td"},[t._v("data")]),e("td",{staticClass:"tr-td"},[t._v("array")]),e("td",{staticClass:"tr-td"},[t._v("[]")])]),t._v(" "),e("tr",[e("td",{staticClass:"tr-td"},[t._v("value")]),e("td",{staticClass:"tr-td"},[t._v("array")])]),t._v(" "),e("tr",[e("td",{staticClass:"tr-td"},[t._v("id")]),e("td",{staticClass:"tr-td"},[t._v("array")]),e("td",{staticClass:"tr-td"},[t._v("[]")])])])}];i._withStripped=!0;var s={render:i,staticRenderFns:a};n.a=s},241:function(t,n,e){var i=e(213);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals);e(2)("0ec0562e",i,!1)}});