Skip to content

C
cube-ui

DiDi / cube-ui
11 个月 前同步成功

通知 34
Star 9078
Fork 1508
C
cube-ui

体验新版 GitCode，发现更多精彩内容 >>

提交 61db0319 编写于 作者: T theniceangel
浏览文件
操作

build: docs

上级 5fafac16
显示空白变更内容
内联 并排
Showing with 4 addition and 4 deletion
docs/index.html
浏览文件 @ 61db0319
<!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.180aa3f86c925cfdd3c1ac20180ad2c3.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/cube-ui/js/manifest.7a076d4565892bc942ca.js></script><script type=text/javascript src=/cube-ui/js/vendor.cc2f17a2a551675ea25a.js></script><script type=text/javascript src=/cube-ui/js/app.47641adfe598e1671f38.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.180aa3f86c925cfdd3c1ac20180ad2c3.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/cube-ui/js/manifest.c9808602e28ad090c11c.js></script><script type=text/javascript src=/cube-ui/js/vendor.cc2f17a2a551675ea25a.js></script><script type=text/javascript src=/cube-ui/js/app.47641adfe598e1671f38.js></script></body></html>
\ No newline at end of file
docs/js/10.6d971c81a0173e0e8dbb.js → docs/js/10.fc9a767b22cf0dda309e.js
浏览文件 @ 61db0319
webpackJsonp([10],{"2y7F":function(s,a,t){s.exports=t("jfD8")},C7g3:function(s,a){s.exports={render:function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[t("h2",{attrs:{id:"TabBar"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-TabBar-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("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(" TabBar")]),s._v(" "),s._m(0),s._v(" "),t("p",[s._v("选项卡。")]),s._v(" "),t("h3",{attrs:{id:"示例"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-示例-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("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(1),s._v(" "),t("h3",{attrs:{id:"CubeTabBar"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-CubeTabBar-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("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(" CubeTabBar")]),s._v(" "),t("p",[s._v("支持默认的点击高亮效果，又支持下划线跟随的效果，并且支持自定义的插槽，实现icon与label搭配的类似于app底部选项卡的样式。")]),s._v(" "),s._m(2),s._v(" "),t("h3",{attrs:{id:"CubeTabBar&CubeTabPanels"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-CubeTabBar&CubeTabPanels-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("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(" CubeTabBar & CubeTabPanels")]),s._v(" "),s._m(3),s._v(" "),s._m(4),s._v(" "),s._m(5),s._v(" "),s._m(6),s._v(" "),t("h3",{attrs:{id:"Props配置"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-Props配置-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("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(7),s._v(" "),t("h3",{attrs:{id:"插槽"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-插槽-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("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),s._v(" "),t("h3",{attrs:{id:"事件"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-事件-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("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(9),s._v(" "),t("h3",{attrs:{id:"实例方法"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-实例方法-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("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(10)])},staticRenderFns:[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("blockquote",[t("p",[s._v("1.10.0 新增")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("如下示例相关代码在"),t("a",{attrs:{href:"https://github.com/didi/cube-ui/tree/master/example/pages/tab-bar"}},[s._v("这里")]),s._v("。")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("ul",[t("li",[t("p",[s._v("默认样式")]),s._v(" "),t("p",[s._v("传入如下 "),t("code",{pre:!0},[s._v("tabs")]),s._v(" 的数据结构便能初始化 "),t("code",{pre:!0},[s._v("cube-tab-bar")]),s._v("，必须使用 "),t("code",{pre:!0},[s._v("v-model")]),s._v(" 指令来选中对应的 tab， v-model 的参数的值必须与某一项 tab 的 label 属性对应，icon 属性是用做于 class 选择器，一般是用字体图标样式，"),t("code",{pre:!0},[s._v("cube-tab-bar")]),s._v(" 在不同的时机派发 "),t("code",{pre:!0},[s._v("click")]),s._v(" 与 "),t("code",{pre:!0},[s._v("change")]),s._v(" 事件，参数则是每次选中的 tab 对应的 label 值。")]),s._v(" "),t("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-bar")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"selectedLabelDefault"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tabs"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"clickHandler"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"changeHandler"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-bar")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n")])]),s._v(" "),t("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-js"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data () {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("selectedLabelDefault")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Vip'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tabs")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Home'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-home'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Like'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-like'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Vip'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-vip'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Me'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-person'")]),s._v("\n }]\n }\n }，\n methods: {\n clickHandler (label) {\n "),t("span",{attrs:{class:"hljs-comment"}},[s._v("// if you clicked home tab, then print 'Home'")]),s._v("\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(label)\n },\n changeHandler (label) {\n "),t("span",{attrs:{class:"hljs-comment"}},[s._v("// if you clicked different tab, this methods can be emitted")]),s._v("\n }\n }\n}\n")])])]),s._v(" "),t("li",[t("p",[s._v("自定义插槽")]),s._v(" "),t("p",[s._v("实际上我们更常见的需求是图标搭配文字效果，因此 "),t("code",{pre:!0},[s._v("cube-tab-bar")]),s._v(" 组件也支持了插槽的使用方式，\n注意必须搭配 "),t("code",{pre:!0},[s._v("cube-tab")]),s._v(" 组件作为第一层级的子组件，来包裹你自定义插槽。")]),s._v(" "),t("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-bar")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"selectedLabelSlots"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-slider")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("inline")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"clickHandler"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"(item, index) in tabs"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- name为icon的插槽 --\x3e")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"icon"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.icon"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- 默认插槽 --\x3e")]),s._v("\n {{item.label}}\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-bar")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n")])]),s._v(" "),t("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-js"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data () {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("selectedLabelSlots")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Like'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tabs")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Home'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-home'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Like'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-like'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Vip'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-vip'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Me'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-person'")]),s._v("\n }]\n }\n }，\n methods: {\n clickHandler (label) {\n "),t("span",{attrs:{class:"hljs-comment"}},[s._v("// if you clicked home tab, then print 'Home'")]),s._v("\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(label)\n }\n }\n}\n")])]),s._v(" "),t("p",[s._v("同时还支持一些配置项， "),t("code",{pre:!0},[s._v("show-slider")]),s._v(" 控制是否开启下划线跟随的效果，"),t("code",{pre:!0},[s._v("inline")]),s._v(" 来决定icon与label是否处于一行，"),t("code",{pre:!0},[s._v("use-transition")]),s._v(" 控制下划线是否使用transition过渡，如示例代码所示。")])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("往往我们的需求是随着 tab 的切换显示不同的容器，这个时候需要搭配 "),t("code",{pre:!0},[s._v("cube-tab-panels")]),s._v(" 组件。"),t("code",{pre:!0},[s._v("cube-tab-panels")]),s._v(" 必须嵌套 "),t("code",{pre:!0},[s._v("cube-tab-panel")]),s._v("，传入 "),t("code",{pre:!0},[s._v("cube-tab")]),s._v(" 与 "),t("code",{pre:!0},[s._v("cube-tab-panel")]),s._v(" 的label值必须一致，因为需要建立一个 tab 对应一个 panel 的关系。他们通过相同的 "),t("code",{pre:!0},[s._v("v-model")]),s._v(" 联动。查看效果可点击右边的 "),t("code",{pre:!0},[s._v("tab-basic")]),s._v(" 示例。")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-bar")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"selectedLabel"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-slider")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"(item, index) in tabs"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":icon")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.icon"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-bar")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-panels")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"selectedLabel"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-panel")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"(item, index) in tabs"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tab-panel-li"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"(hero, index) in item.heroes"')]),s._v(">")]),s._v("\n {{hero}}\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-panel")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-panels")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-js"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data () {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("selectedLabel")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'天辉'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tabs")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'天辉'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-like'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("heroes")]),s._v(": ["),t("span",{attrs:{class:"hljs-string"}},[s._v("'敌法师'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'卓尔游侠'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'主宰'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'米拉娜'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'变体精灵'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'幻影长矛手'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'复仇之魂'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'力丸'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'矮人狙击手'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'圣堂刺客'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'露娜'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'赏金猎人'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'熊战士'")]),s._v("]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'夜魇'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-star'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("heroes")]),s._v(": ["),t("span",{attrs:{class:"hljs-string"}},[s._v("'血魔'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'影魔'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'剃刀'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'剧毒术士'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'虚空假面'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'幻影刺客'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'冥界亚龙'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'克林克兹'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'育母蜘蛛'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'编织者'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'幽鬼'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'司夜刺客'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'米波'")]),s._v("]\n }]\n }\n }\n}\n")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("事实上，"),t("code",{pre:!0},[s._v("cube-tab-bar")]),s._v(" 还能搭配许多其他cube-ui的组件(cube-slide ，cube-scroll)来做出类似原生 app 布局的效果。可点击右边的 "),t("code",{pre:!0},[s._v("ScrollTab Demo")]),s._v(" 与 "),t("code",{pre:!0},[s._v("tab-composite")]),s._v(" 示例来查看效果")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("ul",[t("li",[t("p",[s._v("CubeTabBar")]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("参数")]),s._v(" "),t("th",[s._v("说明")]),s._v(" "),t("th",[s._v("类型")]),s._v(" "),t("th",[s._v("示例")]),s._v(" "),t("th",[s._v("默认值")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("value")]),s._v(" "),t("td",[s._v("使用 v-model，初始化时选中对应的 tab")]),s._v(" "),t("td",[s._v("String/Number")]),s._v(" "),t("td",[s._v("-")]),s._v(" "),t("td",[s._v("-")])]),s._v(" "),t("tr",[t("td",[s._v("data")]),s._v(" "),t("td",[s._v("用于 "),t("code",{pre:!0},[s._v("cube-tab-bar")]),s._v(" 渲染的数据，当需要使用内置的默认插槽，此参数必传，数组的每一项是一个 Object 类型，包括 "),t("code",{pre:!0},[s._v("label")]),s._v(" 和 "),t("code",{pre:!0},[s._v("icon")]),s._v("，如果使用自定义插槽，可不传此值")]),s._v(" "),t("td",[s._v("Array")]),s._v(" "),t("td",[s._v("[{label: 1, icon: 'cubeic-like'}， {label: 2, icon: 'cubeic-like'}]")]),s._v(" "),t("td",[s._v("[]")])]),s._v(" "),t("tr",[t("td",[s._v("show-slider")]),s._v(" "),t("td",[s._v("是否开启下划线跟随效果")]),s._v(" "),t("td",[s._v("Boolean")]),s._v(" "),t("td",[s._v("true/false")]),s._v(" "),t("td",[s._v("false")])]),s._v(" "),t("tr",[t("td",[s._v("inline")]),s._v(" "),t("td",[s._v("文字与图标是否显示在一行")]),s._v(" "),t("td",[s._v("Boolean")]),s._v(" "),t("td",[s._v("true/false")]),s._v(" "),t("td",[s._v("false")])]),s._v(" "),t("tr",[t("td",[s._v("use-transition")]),s._v(" "),t("td",[s._v("是否开启 transition 过渡")]),s._v(" "),t("td",[s._v("Boolean")]),s._v(" "),t("td",[s._v("true/false")]),s._v(" "),t("td",[s._v("true")])])])])]),s._v(" "),t("li",[t("p",[s._v("CubeTab")]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("参数")]),s._v(" "),t("th",[s._v("说明")]),s._v(" "),t("th",[s._v("类型")]),s._v(" "),t("th",[s._v("是否必传")]),s._v(" "),t("th",[s._v("默认值")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("label")]),s._v(" "),t("td",[s._v("用于判断哪个 tab 点击从而高亮")]),s._v(" "),t("td",[s._v("String/Number")]),s._v(" "),t("td",[s._v("是")]),s._v(" "),t("td",[s._v("-")])])])])]),s._v(" "),t("li",[t("p",[s._v("CubeTabPanels")]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("参数")]),s._v(" "),t("th",[s._v("说明")]),s._v(" "),t("th",[s._v("类型")]),s._v(" "),t("th",[s._v("示例")]),s._v(" "),t("th",[s._v("默认值")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("value")]),s._v(" "),t("td",[s._v("使用 v-model，初始化时显示对应的 panels")]),s._v(" "),t("td",[s._v("String/Number")]),s._v(" "),t("td",[s._v("-")]),s._v(" "),t("td",[s._v("-")])]),s._v(" "),t("tr",[t("td",[s._v("data")]),s._v(" "),t("td",[s._v("用于 "),t("code",{pre:!0},[s._v("cube-tab-panels")]),s._v(" 渲染的数据，当需要使用内置的默认插槽，此参数必传，数组的每一项是一个 Object 类型，包括 "),t("code",{pre:!0},[s._v("label")]),s._v("，如果使用自定义插槽，可不传此值")]),s._v(" "),t("td",[s._v("Array")]),s._v(" "),t("td",[s._v("[{label: 1}， {label: 2}]")]),s._v(" "),t("td",[s._v("[]")])])])])]),s._v(" "),t("li",[t("p",[s._v("CubeTabPanel")]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("参数")]),s._v(" "),t("th",[s._v("说明")]),s._v(" "),t("th",[s._v("类型")]),s._v(" "),t("th",[s._v("是否必传")]),s._v(" "),t("th",[s._v("默认值")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("label")]),s._v(" "),t("td",[s._v("用于显示 panel")]),s._v(" "),t("td",[s._v("String/Number")]),s._v(" "),t("td",[s._v("是")]),s._v(" "),t("td",[s._v("-")])])])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("ul",[t("li",[t("p",[s._v("CubeTab")]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("名称")]),s._v(" "),t("th",[s._v("说明")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("default")]),s._v(" "),t("td",[t("code",{pre:!0},[s._v("cube-tab")]),s._v(" 渲染的文案")])]),s._v(" "),t("tr",[t("td",[s._v("icon")]),s._v(" "),t("td",[s._v("一般是用来添加 icon 图标")])])])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("ul",[t("li",[t("p",[s._v("CubeTabBar")]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("事件名")]),s._v(" "),t("th",[s._v("说明")]),s._v(" "),t("th",[s._v("参数1")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("click")]),s._v(" "),t("td",[s._v("当 tab 被点击时派发")]),s._v(" "),t("td",[s._v("点中的tab的label值")])]),s._v(" "),t("tr",[t("td",[s._v("change")]),s._v(" "),t("td",[s._v("当点击不同的 tab 时派发")]),s._v(" "),t("td",[s._v("点中的tab的label值")])])])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("ul",[t("li",[t("p",[s._v("CubeTabBar")]),s._v(" "),t("p",[s._v("当该实例的 "),t("code",{pre:!0},[s._v("show-slider")]),s._v(" 属性设置为true，该方法才有效。")]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("方法名")]),s._v(" "),t("th",[s._v("说明")]),s._v(" "),t("th",[s._v("参数类型")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("setSliderTransform")]),s._v(" "),t("td",[s._v("改变 "),t("code",{pre:!0},[s._v("cube-tab-bar")]),s._v(" 组件的下划线的 transformX，如果传 Number，会转成像素，也可以传带有单位的 String")]),s._v(" "),t("td",[s._v("Number/String")])])])])])])}]}},jfD8:function(s,a,t){var v=t("VU/8")(null,t("C7g3"),null,null,null);s.exports=v.exports}});
\ No newline at end of file
webpackJsonp([10],{"2y7F":function(s,a,t){s.exports=t("jfD8")},C7g3:function(s,a){s.exports={render:function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[t("h2",{attrs:{id:"TabBar"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-TabBar-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("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(" TabBar")]),s._v(" "),s._m(0),s._v(" "),t("p",[s._v("选项卡。")]),s._v(" "),t("h3",{attrs:{id:"示例"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-示例-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("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(1),s._v(" "),t("h3",{attrs:{id:"CubeTabBar"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-CubeTabBar-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("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(" CubeTabBar")]),s._v(" "),t("p",[s._v("支持默认的点击高亮效果，又支持下划线跟随的效果，并且支持自定义的插槽，实现icon与label搭配的类似于app底部选项卡的样式。")]),s._v(" "),s._m(2),s._v(" "),t("h3",{attrs:{id:"CubeTabBar&CubeTabPanels"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-CubeTabBar&CubeTabPanels-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("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(" CubeTabBar & CubeTabPanels")]),s._v(" "),s._m(3),s._v(" "),s._m(4),s._v(" "),s._m(5),s._v(" "),s._m(6),s._v(" "),t("h3",{attrs:{id:"Props配置"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-Props配置-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("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(7),s._v(" "),t("h3",{attrs:{id:"插槽"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-插槽-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("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),s._v(" "),t("h3",{attrs:{id:"事件"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-事件-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("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(9),s._v(" "),t("h3",{attrs:{id:"实例方法"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-实例方法-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("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(10)])},staticRenderFns:[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("blockquote",[t("p",[s._v("1.10.0 新增")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("如下示例相关代码在"),t("a",{attrs:{href:"https://github.com/didi/cube-ui/tree/master/example/pages/tab-bar"}},[s._v("这里")]),s._v("。")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("ul",[t("li",[t("p",[s._v("默认样式")]),s._v(" "),t("p",[s._v("传入如下 "),t("code",{pre:!0},[s._v("tabs")]),s._v(" 的数据结构便能初始化 "),t("code",{pre:!0},[s._v("cube-tab-bar")]),s._v("，必须使用 "),t("code",{pre:!0},[s._v("v-model")]),s._v(" 指令来选中对应的 tab， v-model 的参数的值必须与某一项 tab 的 label 属性对应，icon 属性是用做于 class 选择器，一般是用字体图标样式，"),t("code",{pre:!0},[s._v("cube-tab-bar")]),s._v(" 在不同的时机派发 "),t("code",{pre:!0},[s._v("click")]),s._v(" 与 "),t("code",{pre:!0},[s._v("change")]),s._v(" 事件，参数则是每次选中的 tab 对应的 label 值。")]),s._v(" "),t("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-bar")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"selectedLabelDefault"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tabs"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"clickHandler"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"changeHandler"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-bar")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n")])]),s._v(" "),t("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-js"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data () {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("selectedLabelDefault")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Vip'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tabs")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Home'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-home'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Like'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-like'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Vip'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-vip'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Me'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-person'")]),s._v("\n }]\n }\n }，\n methods: {\n clickHandler (label) {\n "),t("span",{attrs:{class:"hljs-comment"}},[s._v("// if you clicked home tab, then print 'Home'")]),s._v("\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(label)\n },\n changeHandler (label) {\n "),t("span",{attrs:{class:"hljs-comment"}},[s._v("// if you clicked different tab, this methods can be emitted")]),s._v("\n }\n }\n}\n")])])]),s._v(" "),t("li",[t("p",[s._v("自定义插槽")]),s._v(" "),t("p",[s._v("实际上我们更常见的需求是图标搭配文字效果，因此 "),t("code",{pre:!0},[s._v("cube-tab-bar")]),s._v(" 组件也支持了插槽的使用方式，\n注意必须搭配 "),t("code",{pre:!0},[s._v("cube-tab")]),s._v(" 组件作为第一层级的子组件，来包裹你自定义插槽。")]),s._v(" "),t("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-bar")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"selectedLabelSlots"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-slider")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("inline")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"clickHandler"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"(item, index) in tabs"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- name为icon的插槽 --\x3e")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"icon"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.icon"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- 默认插槽 --\x3e")]),s._v("\n {{item.label}}\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-bar")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n")])]),s._v(" "),t("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-js"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data () {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("selectedLabelSlots")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Like'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tabs")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Home'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-home'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Like'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-like'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Vip'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-vip'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Me'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-person'")]),s._v("\n }]\n }\n }，\n methods: {\n clickHandler (label) {\n "),t("span",{attrs:{class:"hljs-comment"}},[s._v("// if you clicked home tab, then print 'Home'")]),s._v("\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(label)\n }\n }\n}\n")])]),s._v(" "),t("p",[s._v("同时还支持一些配置项， "),t("code",{pre:!0},[s._v("showSlider")]),s._v(" 控制是否开启下划线跟随的效果，"),t("code",{pre:!0},[s._v("inline")]),s._v(" 来决定icon与label是否处于一行，"),t("code",{pre:!0},[s._v("useTransition")]),s._v(" 控制下划线是否使用transition过渡，如示例代码所示。")])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("往往我们的需求是随着 tab 的切换显示不同的容器，这个时候需要搭配 "),t("code",{pre:!0},[s._v("cube-tab-panels")]),s._v(" 组件。"),t("code",{pre:!0},[s._v("cube-tab-panels")]),s._v(" 必须嵌套 "),t("code",{pre:!0},[s._v("cube-tab-panel")]),s._v("，传入 "),t("code",{pre:!0},[s._v("cube-tab")]),s._v(" 与 "),t("code",{pre:!0},[s._v("cube-tab-panel")]),s._v(" 的label值必须一致，因为需要建立一个 tab 对应一个 panel 的关系。他们通过相同的 "),t("code",{pre:!0},[s._v("v-model")]),s._v(" 联动。查看效果可点击右边的 "),t("code",{pre:!0},[s._v("tab-basic")]),s._v(" 示例。")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-bar")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"selectedLabel"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-slider")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"(item, index) in tabs"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":icon")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.icon"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-bar")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-panels")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"selectedLabel"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-panel")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"(item, index) in tabs"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tab-panel-li"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"(hero, index) in item.heroes"')]),s._v(">")]),s._v("\n {{hero}}\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-panel")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-panels")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-js"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data () {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("selectedLabel")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'天辉'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tabs")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'天辉'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-like'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("heroes")]),s._v(": ["),t("span",{attrs:{class:"hljs-string"}},[s._v("'敌法师'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'卓尔游侠'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'主宰'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'米拉娜'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'变体精灵'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'幻影长矛手'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'复仇之魂'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'力丸'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'矮人狙击手'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'圣堂刺客'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'露娜'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'赏金猎人'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'熊战士'")]),s._v("]\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'夜魇'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-star'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("heroes")]),s._v(": ["),t("span",{attrs:{class:"hljs-string"}},[s._v("'血魔'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'影魔'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'剃刀'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'剧毒术士'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'虚空假面'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'幻影刺客'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'冥界亚龙'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'克林克兹'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'育母蜘蛛'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'编织者'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'幽鬼'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'司夜刺客'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'米波'")]),s._v("]\n }]\n }\n }\n}\n")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("事实上，"),t("code",{pre:!0},[s._v("cube-tab-bar")]),s._v(" 还能搭配许多其他cube-ui的组件(cube-slide ，cube-scroll)来做出类似原生 app 布局的效果。可点击右边的 "),t("code",{pre:!0},[s._v("ScrollTab Demo")]),s._v(" 与 "),t("code",{pre:!0},[s._v("tab-composite")]),s._v(" 示例来查看效果")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("ul",[t("li",[t("p",[s._v("CubeTabBar")]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("参数")]),s._v(" "),t("th",[s._v("说明")]),s._v(" "),t("th",[s._v("类型")]),s._v(" "),t("th",[s._v("示例")]),s._v(" "),t("th",[s._v("默认值")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("value")]),s._v(" "),t("td",[s._v("使用 v-model，初始化时选中对应的 tab")]),s._v(" "),t("td",[s._v("String/Number")]),s._v(" "),t("td",[s._v("-")]),s._v(" "),t("td",[s._v("-")])]),s._v(" "),t("tr",[t("td",[s._v("data")]),s._v(" "),t("td",[s._v("用于 "),t("code",{pre:!0},[s._v("cube-tab-bar")]),s._v(" 渲染的数据，当需要使用内置的默认插槽，此参数必传，数组的每一项是一个 Object 类型，包括 "),t("code",{pre:!0},[s._v("label")]),s._v(" 和 "),t("code",{pre:!0},[s._v("icon")]),s._v("，如果使用自定义插槽，可不传此值")]),s._v(" "),t("td",[s._v("Array")]),s._v(" "),t("td",[s._v("[{label: 1, icon: 'cubeic-like'}， {label: 2, icon: 'cubeic-like'}]")]),s._v(" "),t("td",[s._v("[]")])]),s._v(" "),t("tr",[t("td",[s._v("showSlider")]),s._v(" "),t("td",[s._v("是否开启下划线跟随效果")]),s._v(" "),t("td",[s._v("Boolean")]),s._v(" "),t("td",[s._v("true/false")]),s._v(" "),t("td",[s._v("false")])]),s._v(" "),t("tr",[t("td",[s._v("inline")]),s._v(" "),t("td",[s._v("文字与图标是否显示在一行")]),s._v(" "),t("td",[s._v("Boolean")]),s._v(" "),t("td",[s._v("true/false")]),s._v(" "),t("td",[s._v("false")])]),s._v(" "),t("tr",[t("td",[s._v("useTransition")]),s._v(" "),t("td",[s._v("是否开启 transition 过渡")]),s._v(" "),t("td",[s._v("Boolean")]),s._v(" "),t("td",[s._v("true/false")]),s._v(" "),t("td",[s._v("true")])])])])]),s._v(" "),t("li",[t("p",[s._v("CubeTab")]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("参数")]),s._v(" "),t("th",[s._v("说明")]),s._v(" "),t("th",[s._v("类型")]),s._v(" "),t("th",[s._v("是否必传")]),s._v(" "),t("th",[s._v("默认值")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("label")]),s._v(" "),t("td",[s._v("用于判断哪个 tab 点击从而高亮")]),s._v(" "),t("td",[s._v("String/Number")]),s._v(" "),t("td",[s._v("是")]),s._v(" "),t("td",[s._v("-")])])])])]),s._v(" "),t("li",[t("p",[s._v("CubeTabPanels")]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("参数")]),s._v(" "),t("th",[s._v("说明")]),s._v(" "),t("th",[s._v("类型")]),s._v(" "),t("th",[s._v("示例")]),s._v(" "),t("th",[s._v("默认值")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("value")]),s._v(" "),t("td",[s._v("使用 v-model，初始化时显示对应的 panels")]),s._v(" "),t("td",[s._v("String/Number")]),s._v(" "),t("td",[s._v("-")]),s._v(" "),t("td",[s._v("-")])]),s._v(" "),t("tr",[t("td",[s._v("data")]),s._v(" "),t("td",[s._v("用于 "),t("code",{pre:!0},[s._v("cube-tab-panels")]),s._v(" 渲染的数据，当需要使用内置的默认插槽，此参数必传，数组的每一项是一个 Object 类型，包括 "),t("code",{pre:!0},[s._v("label")]),s._v("，如果使用自定义插槽，可不传此值")]),s._v(" "),t("td",[s._v("Array")]),s._v(" "),t("td",[s._v("[{label: 1}， {label: 2}]")]),s._v(" "),t("td",[s._v("[]")])])])])]),s._v(" "),t("li",[t("p",[s._v("CubeTabPanel")]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("参数")]),s._v(" "),t("th",[s._v("说明")]),s._v(" "),t("th",[s._v("类型")]),s._v(" "),t("th",[s._v("是否必传")]),s._v(" "),t("th",[s._v("默认值")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("label")]),s._v(" "),t("td",[s._v("用于显示 panel")]),s._v(" "),t("td",[s._v("String/Number")]),s._v(" "),t("td",[s._v("是")]),s._v(" "),t("td",[s._v("-")])])])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("ul",[t("li",[t("p",[s._v("CubeTab")]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("名称")]),s._v(" "),t("th",[s._v("说明")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("default")]),s._v(" "),t("td",[t("code",{pre:!0},[s._v("cube-tab")]),s._v(" 渲染的文案")])]),s._v(" "),t("tr",[t("td",[s._v("icon")]),s._v(" "),t("td",[s._v("一般是用来添加 icon 图标")])])])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("ul",[t("li",[t("p",[s._v("CubeTabBar")]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("事件名")]),s._v(" "),t("th",[s._v("说明")]),s._v(" "),t("th",[s._v("参数1")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("click")]),s._v(" "),t("td",[s._v("当 tab 被点击时派发")]),s._v(" "),t("td",[s._v("点中的tab的label值")])]),s._v(" "),t("tr",[t("td",[s._v("change")]),s._v(" "),t("td",[s._v("当点击不同的 tab 时派发")]),s._v(" "),t("td",[s._v("点中的tab的label值")])])])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("ul",[t("li",[t("p",[s._v("CubeTabBar")]),s._v(" "),t("p",[s._v("当该实例的 "),t("code",{pre:!0},[s._v("showSlider")]),s._v(" 属性设置为true，该方法才有效。")]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("方法名")]),s._v(" "),t("th",[s._v("说明")]),s._v(" "),t("th",[s._v("参数类型")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("setSliderTransform")]),s._v(" "),t("td",[s._v("改变 "),t("code",{pre:!0},[s._v("cube-tab-bar")]),s._v(" 组件的下划线的 transformX，如果传 Number，会转成像素，也可以传带有单位的 String")]),s._v(" "),t("td",[s._v("Number/String")])])])])])])}]}},jfD8:function(s,a,t){var v=t("VU/8")(null,t("C7g3"),null,null,null);s.exports=v.exports}});
\ No newline at end of file
docs/js/52.828888411942d67bb236.js → docs/js/52.3fdb2c3e01ef58d2bc2d.js
浏览文件 @ 61db0319
webpackJsonp([52],{JADn:function(s,t,a){var e=a("VU/8")(null,a("n+GP"),null,null,null);s.exports=e.exports},djff:function(s,t,a){s.exports=a("JADn")},"n+GP":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:"TabBar"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-TabBar-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(" TabBar")]),s._v(" "),s._m(0),s._v(" "),a("p",[s._v("Implementing the function of tab switching.")]),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:"CubeTabBar"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-CubeTabBar-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(" CubeTabBar")]),s._v(" "),s._m(2),s._v(" "),s._m(3),s._v(" "),a("h3",{attrs:{id:"CubeTabBar&CubeTabPanels"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-CubeTabBar&CubeTabPanels-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(" CubeTabBar & CubeTabPanels")]),s._v(" "),s._m(4),s._v(" "),s._m(5),s._v(" "),s._m(6),s._v(" "),s._m(7),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(8),s._v(" "),a("h3",{attrs:{id:"Slot"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Slot-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(" Slot")]),s._v(" "),s._m(9),s._v(" "),a("h3",{attrs:{id:"Events"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Events-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(" Events")]),s._v(" "),s._m(10),s._v(" "),a("h3",{attrs:{id:"Instancemethods"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Instancemethods-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(" Instance methods")]),s._v(" "),s._m(11)])},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("blockquote",[a("p",[s._v("New in 1.10.0+")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The following demo code is "),a("a",{attrs:{href:"https://github.com/didi/cube-ui/tree/master/example/pages/tab-bar"}},[s._v("here")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("cube-tab-bar")]),s._v(" supports click highlighting, underscore follow-up effects, and custom slots for icon-label-like app-navigation styles.")])},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("p",[s._v("You can initialize "),a("code",{pre:!0},[s._v("cube-tab-bar")]),s._v(" by passing in the data structure of "),a("code",{pre:!0},[s._v("tabs")]),s._v(" as follows. You must use the "),a("code",{pre:!0},[s._v("v-model")]),s._v(" directive to select the corresponding tab. The value of the v-model argument must correspond to the label attribute of a tab in "),a("code",{pre:!0},[s._v("cube-tab-bar")]),s._v(". The icon attribute is used as a class selector, which is generally used with icon-font class. It will dispatch "),a("code",{pre:!0},[s._v("click")]),s._v(" and "),a("code",{pre:!0},[s._v("change")]),s._v(" event at the proper time. The parameter is the label value corresponding to each selected tab.")]),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("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-bar")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"selectedLabelDefault"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tabs"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"clickHandler"')]),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(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-bar")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("selectedLabelDefault")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Vip'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tabs")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Home'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Like'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Vip'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Me'")]),s._v("\n }]\n }\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n clickHandler (label) {\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// if you clicked home tab, then print 'Home'")]),s._v("\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(label)\n },\n changeHandler (label) {\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// if you clicked different tab, this methods can be emitted")]),s._v("\n }\n }\n}\n")])])]),s._v(" "),a("li",[a("p",[s._v("Custom slot")]),s._v(" "),a("p",[s._v("In fact, we always want to display icons and text effects which looks like app navigation styles, so the "),a("code",{pre:!0},[s._v("cube-tab-bar")]),s._v(" component also supports the use of slot. Note that you must use the "),a("code",{pre:!0},[s._v("cube-tab")]),s._v(" component as a sub-component of the first level to wrap your custom slot.")]),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("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-bar")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"selectedLabelSlots"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-slider")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("inline")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"clickHandler"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"(item, index) in tabs"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- icon slot --\x3e")]),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("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"icon"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.icon"')]),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-comment"}},[s._v("\x3c!-- default slot --\x3e")]),s._v("\n {{item.label}}\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-bar")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("selectedLabelSlots")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Like'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tabs")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Home'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-home'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Like'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-like'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Vip'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-vip'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Me'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-person'")]),s._v("\n }]\n }\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n clickHandler (label) {\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// if you clicked home tab, then print 'Home'")]),s._v("\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(label)\n }\n }\n}\n")])]),s._v(" "),a("p",[s._v("At the same time, "),a("code",{pre:!0},[s._v("cube-tab-bar")]),s._v(" also supports other configurations, "),a("code",{pre:!0},[s._v("show-slider")]),s._v(" controls whether to turn on the effect of underscore, "),a("code",{pre:!0},[s._v("inline")]),s._v(" to determine whether the icon and label are in a line, "),a("code",{pre:!0},[s._v("use-transition")]),s._v(" controls whether the underscore use transition, as shown in the sample code.")])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Usually, our requirement is to display different panel as tabs are switched, so we need to use the "),a("code",{pre:!0},[s._v("cube-tab-panels")]),s._v(" component. "),a("code",{pre:!0},[s._v("cube-tab-panels")]),s._v(" must be nested with "),a("code",{pre:!0},[s._v("cube-tab-panel")]),s._v(". The label values passed to "),a("code",{pre:!0},[s._v("cube-tab")]),s._v(" and "),a("code",{pre:!0},[s._v("cube-tab-panel")]),s._v(" must be the same, because it is necessary to create the relationship between tab with panel. They are linked by the same "),a("code",{pre:!0},[s._v("v-model")]),s._v(".To see the effect, click on the "),a("code",{pre:!0},[s._v("tab-basic")]),s._v(" demo on the right.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return 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("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-bar")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"selectedLabel"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-slider")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"(item, index) in tabs"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),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("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"icon"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.icon"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n {{item.label}}\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-bar")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-panels")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"selectedLabel"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-panel")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"(item, index) in tabs"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tab-panel-li"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"(hero, index) in item.heroes"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"index"')]),s._v(">")]),s._v("\n {{hero}}\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-panel")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-panels")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return 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("selectedLabel")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'天辉'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tabs")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[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-like'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("heroes")]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'敌法师'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'卓尔游侠'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'主宰'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'米拉娜'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'变体精灵'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'幻影长矛手'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'复仇之魂'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'力丸'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'矮人狙击手'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'圣堂刺客'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'露娜'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'赏金猎人'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'熊战士'")]),s._v("]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[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-star'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("heroes")]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'血魔'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'影魔'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'剃刀'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'剧毒术士'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'虚空假面'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'幻影刺客'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'冥界亚龙'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'克林克兹'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'育母蜘蛛'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'编织者'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'幽鬼'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'司夜刺客'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'米波'")]),s._v("]\n }]\n }\n }\n}\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("In fact, "),a("code",{pre:!0},[s._v("cube-tab-bar")]),s._v(" can be combined with many other cube-ui's components (such as: "),a("code",{pre:!0},[s._v("cube-scroll")]),s._v(", "),a("code",{pre:!0},[s._v("cube-slide")]),s._v(") to make a similar effect to the layout of native apps. Click on the "),a("code",{pre:!0},[s._v("ScrollTab Demo")]),s._v(" and "),a("code",{pre:!0},[s._v("tab-composite")]),s._v(" example on the right to see the effect.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("p",[s._v("CubeTabBar")]),s._v(" "),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("Demo")]),s._v(" "),a("th",[s._v("Default")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("value")]),s._v(" "),a("td",[s._v("Use v-model to select the corresponding tab when initializing.")]),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("data")]),s._v(" "),a("td",[s._v("For data rendered with "),a("code",{pre:!0},[s._v("cube-tab-bar")]),s._v(", when using the built-in default slot, this parameter must be passed. Each item of the array is an Object type, including "),a("code",{pre:!0},[s._v("label")]),s._v(" and "),a("code",{pre:!0},[s._v("icon")]),s._v(". If a custom slot is used, this value may not be passed")]),s._v(" "),a("td",[s._v("Array")]),s._v(" "),a("td",[s._v("[{label: 1, icon: 'cubeic-like'}, {label: 2, icon: 'cubeic-like'}]")]),s._v(" "),a("td",[s._v("[]")])]),s._v(" "),a("tr",[a("td",[s._v("show-slider")]),s._v(" "),a("td",[s._v("Whether to turn on the underscore follow effect")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("true/false")]),s._v(" "),a("td",[s._v("false")])]),s._v(" "),a("tr",[a("td",[s._v("inline")]),s._v(" "),a("td",[s._v("Whether text and icons are displayed on one line")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("true/false")]),s._v(" "),a("td",[s._v("false")])]),s._v(" "),a("tr",[a("td",[s._v("use-transition")]),s._v(" "),a("td",[s._v("Whether to use transition")]),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("li",[a("p",[s._v("CubeTab")]),s._v(" "),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("Needed")]),s._v(" "),a("th",[s._v("Default")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("label")]),s._v(" "),a("td",[s._v("Use it to determine which tab is clicked")]),s._v(" "),a("td",[s._v("String/Number")]),s._v(" "),a("td",[s._v("yes")]),s._v(" "),a("td",[s._v("-")])])])])]),s._v(" "),a("li",[a("p",[s._v("CubeTabPanels")]),s._v(" "),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("Demo")]),s._v(" "),a("th",[s._v("Default")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("value")]),s._v(" "),a("td",[s._v("Use v-model to display the corresponding panels at initialization")]),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("data")]),s._v(" "),a("td",[s._v("For data rendered with "),a("code",{pre:!0},[s._v("cube-tab-panels")]),s._v(", when using the built-in default slot, this parameter must be passed. Each item of the array is an Object type, including "),a("code",{pre:!0},[s._v("label")]),s._v(". If a custom slot is used, this value may not be passed")]),s._v(" "),a("td",[s._v("Array")]),s._v(" "),a("td",[s._v("[{label: 1}, {label: 2}]")]),s._v(" "),a("td",[s._v("[]")])])])])]),s._v(" "),a("li",[a("p",[s._v("CubeTabPanel")]),s._v(" "),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("Needed")]),s._v(" "),a("th",[s._v("Default")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("label")]),s._v(" "),a("td",[s._v("determine that the panels is displayed")]),s._v(" "),a("td",[s._v("String/Number")]),s._v(" "),a("td",[s._v("yes")]),s._v(" "),a("td",[s._v("-")])])])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("p",[s._v("CubeTab")]),s._v(" "),a("table",[a("thead",[a("tr",[a("th",[s._v("Attribute")]),s._v(" "),a("th",[s._v("Description")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("default")]),s._v(" "),a("td",[a("code",{pre:!0},[s._v("cube-tab")]),s._v("'s text")])]),s._v(" "),a("tr",[a("td",[s._v("icon")]),s._v(" "),a("td",[s._v("Generally used to display icon")])])])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("p",[s._v("CubeTabBar")]),s._v(" "),a("table",[a("thead",[a("tr",[a("th",[s._v("Event Name")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("parameter")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("click")]),s._v(" "),a("td",[s._v("Dispatched when the tab is clicked")]),s._v(" "),a("td",[s._v("The label value of the tab which is selected")])]),s._v(" "),a("tr",[a("td",[s._v("change")]),s._v(" "),a("td",[s._v("Dispatched when tab changed")]),s._v(" "),a("td",[s._v("The label value of the tab which is selected")])])])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("p",[s._v("CubeTabBar")]),s._v(" "),a("p",[s._v("This method works when the instance's "),a("code",{pre:!0},[s._v("show-slider")]),s._v(" property is set to true.")]),s._v(" "),a("table",[a("thead",[a("tr",[a("th",[s._v("Method name")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Parameter Type")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("setSliderTransform")]),s._v(" "),a("td",[s._v("Change the underscore's transformX of the "),a("code",{pre:!0},[s._v("cube-tab-bar")]),s._v(" component. If you pass Number, it will be converted into a pixel, or you can pass a String with units")]),s._v(" "),a("td",[s._v("Number/String")])])])])])])}]}}});
\ No newline at end of file
webpackJsonp([52],{JADn:function(s,t,a){var e=a("VU/8")(null,a("n+GP"),null,null,null);s.exports=e.exports},djff:function(s,t,a){s.exports=a("JADn")},"n+GP":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:"TabBar"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-TabBar-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(" TabBar")]),s._v(" "),s._m(0),s._v(" "),a("p",[s._v("Implementing the function of tab switching.")]),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:"CubeTabBar"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-CubeTabBar-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(" CubeTabBar")]),s._v(" "),s._m(2),s._v(" "),s._m(3),s._v(" "),a("h3",{attrs:{id:"CubeTabBar&CubeTabPanels"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-CubeTabBar&CubeTabPanels-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(" CubeTabBar & CubeTabPanels")]),s._v(" "),s._m(4),s._v(" "),s._m(5),s._v(" "),s._m(6),s._v(" "),s._m(7),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(8),s._v(" "),a("h3",{attrs:{id:"Slot"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Slot-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(" Slot")]),s._v(" "),s._m(9),s._v(" "),a("h3",{attrs:{id:"Events"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Events-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(" Events")]),s._v(" "),s._m(10),s._v(" "),a("h3",{attrs:{id:"Instancemethods"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Instancemethods-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(" Instance methods")]),s._v(" "),s._m(11)])},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("blockquote",[a("p",[s._v("New in 1.10.0+")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The following demo code is "),a("a",{attrs:{href:"https://github.com/didi/cube-ui/tree/master/example/pages/tab-bar"}},[s._v("here")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("cube-tab-bar")]),s._v(" supports click highlighting, underscore follow-up effects, and custom slots for icon-label-like app-navigation styles.")])},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("p",[s._v("You can initialize "),a("code",{pre:!0},[s._v("cube-tab-bar")]),s._v(" by passing in the data structure of "),a("code",{pre:!0},[s._v("tabs")]),s._v(" as follows. You must use the "),a("code",{pre:!0},[s._v("v-model")]),s._v(" directive to select the corresponding tab. The value of the v-model argument must correspond to the label attribute of a tab in "),a("code",{pre:!0},[s._v("cube-tab-bar")]),s._v(". The icon attribute is used as a class selector, which is generally used with icon-font class. It will dispatch "),a("code",{pre:!0},[s._v("click")]),s._v(" and "),a("code",{pre:!0},[s._v("change")]),s._v(" event at the proper time. The parameter is the label value corresponding to each selected tab.")]),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("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-bar")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"selectedLabelDefault"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tabs"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"clickHandler"')]),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(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-bar")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("selectedLabelDefault")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Vip'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tabs")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Home'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Like'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Vip'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Me'")]),s._v("\n }]\n }\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n clickHandler (label) {\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// if you clicked home tab, then print 'Home'")]),s._v("\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(label)\n },\n changeHandler (label) {\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// if you clicked different tab, this methods can be emitted")]),s._v("\n }\n }\n}\n")])])]),s._v(" "),a("li",[a("p",[s._v("Custom slot")]),s._v(" "),a("p",[s._v("In fact, we always want to display icons and text effects which looks like app navigation styles, so the "),a("code",{pre:!0},[s._v("cube-tab-bar")]),s._v(" component also supports the use of slot. Note that you must use the "),a("code",{pre:!0},[s._v("cube-tab")]),s._v(" component as a sub-component of the first level to wrap your custom slot.")]),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("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-bar")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"selectedLabelSlots"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-slider")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("inline")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"clickHandler"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"(item, index) in tabs"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- icon slot --\x3e")]),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("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"icon"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.icon"')]),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-comment"}},[s._v("\x3c!-- default slot --\x3e")]),s._v("\n {{item.label}}\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-bar")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),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("selectedLabelSlots")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Like'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tabs")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Home'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-home'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Like'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-like'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Vip'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-vip'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Me'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-person'")]),s._v("\n }]\n }\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n clickHandler (label) {\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// if you clicked home tab, then print 'Home'")]),s._v("\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(label)\n }\n }\n}\n")])]),s._v(" "),a("p",[s._v("At the same time, "),a("code",{pre:!0},[s._v("cube-tab-bar")]),s._v(" also supports other configurations, "),a("code",{pre:!0},[s._v("showSlider")]),s._v(" controls whether to turn on the effect of underscore, "),a("code",{pre:!0},[s._v("inline")]),s._v(" to determine whether the icon and label are in a line, "),a("code",{pre:!0},[s._v("useTransition")]),s._v(" controls whether the underscore use transition, as shown in the sample code.")])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Usually, our requirement is to display different panel as tabs are switched, so we need to use the "),a("code",{pre:!0},[s._v("cube-tab-panels")]),s._v(" component. "),a("code",{pre:!0},[s._v("cube-tab-panels")]),s._v(" must be nested with "),a("code",{pre:!0},[s._v("cube-tab-panel")]),s._v(". The label values passed to "),a("code",{pre:!0},[s._v("cube-tab")]),s._v(" and "),a("code",{pre:!0},[s._v("cube-tab-panel")]),s._v(" must be the same, because it is necessary to create the relationship between tab with panel. They are linked by the same "),a("code",{pre:!0},[s._v("v-model")]),s._v(".To see the effect, click on the "),a("code",{pre:!0},[s._v("tab-basic")]),s._v(" demo on the right.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return 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("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-bar")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"selectedLabel"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-slider")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"(item, index) in tabs"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),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("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"icon"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.icon"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n {{item.label}}\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-bar")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-panels")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"selectedLabel"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-panel")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"(item, index) in tabs"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tab-panel-li"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"(hero, index) in item.heroes"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"index"')]),s._v(">")]),s._v("\n {{hero}}\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-panel")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-panels")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return 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("selectedLabel")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'天辉'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tabs")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[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-like'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("heroes")]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'敌法师'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'卓尔游侠'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'主宰'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'米拉娜'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'变体精灵'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'幻影长矛手'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'复仇之魂'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'力丸'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'矮人狙击手'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'圣堂刺客'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'露娜'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'赏金猎人'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'熊战士'")]),s._v("]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[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-star'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("heroes")]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'血魔'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'影魔'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'剃刀'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'剧毒术士'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'虚空假面'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'幻影刺客'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'冥界亚龙'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'克林克兹'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'育母蜘蛛'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'编织者'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'幽鬼'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'司夜刺客'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'米波'")]),s._v("]\n }]\n }\n }\n}\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("In fact, "),a("code",{pre:!0},[s._v("cube-tab-bar")]),s._v(" can be combined with many other cube-ui's components (such as: "),a("code",{pre:!0},[s._v("cube-scroll")]),s._v(", "),a("code",{pre:!0},[s._v("cube-slide")]),s._v(") to make a similar effect to the layout of native apps. Click on the "),a("code",{pre:!0},[s._v("ScrollTab Demo")]),s._v(" and "),a("code",{pre:!0},[s._v("tab-composite")]),s._v(" example on the right to see the effect.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("p",[s._v("CubeTabBar")]),s._v(" "),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("Demo")]),s._v(" "),a("th",[s._v("Default")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("value")]),s._v(" "),a("td",[s._v("Use v-model to select the corresponding tab when initializing.")]),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("data")]),s._v(" "),a("td",[s._v("For data rendered with "),a("code",{pre:!0},[s._v("cube-tab-bar")]),s._v(", when using the built-in default slot, this parameter must be passed. Each item of the array is an Object type, including "),a("code",{pre:!0},[s._v("label")]),s._v(" and "),a("code",{pre:!0},[s._v("icon")]),s._v(". If a custom slot is used, this value may not be passed")]),s._v(" "),a("td",[s._v("Array")]),s._v(" "),a("td",[s._v("[{label: 1, icon: 'cubeic-like'}, {label: 2, icon: 'cubeic-like'}]")]),s._v(" "),a("td",[s._v("[]")])]),s._v(" "),a("tr",[a("td",[s._v("showSlider")]),s._v(" "),a("td",[s._v("Whether to turn on the underscore follow effect")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("true/false")]),s._v(" "),a("td",[s._v("false")])]),s._v(" "),a("tr",[a("td",[s._v("inline")]),s._v(" "),a("td",[s._v("Whether text and icons are displayed on one line")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("true/false")]),s._v(" "),a("td",[s._v("false")])]),s._v(" "),a("tr",[a("td",[s._v("useTransition")]),s._v(" "),a("td",[s._v("Whether to use transition")]),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("li",[a("p",[s._v("CubeTab")]),s._v(" "),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("Needed")]),s._v(" "),a("th",[s._v("Default")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("label")]),s._v(" "),a("td",[s._v("Use it to determine which tab is clicked")]),s._v(" "),a("td",[s._v("String/Number")]),s._v(" "),a("td",[s._v("yes")]),s._v(" "),a("td",[s._v("-")])])])])]),s._v(" "),a("li",[a("p",[s._v("CubeTabPanels")]),s._v(" "),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("Demo")]),s._v(" "),a("th",[s._v("Default")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("value")]),s._v(" "),a("td",[s._v("Use v-model to display the corresponding panels at initialization")]),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("data")]),s._v(" "),a("td",[s._v("For data rendered with "),a("code",{pre:!0},[s._v("cube-tab-panels")]),s._v(", when using the built-in default slot, this parameter must be passed. Each item of the array is an Object type, including "),a("code",{pre:!0},[s._v("label")]),s._v(". If a custom slot is used, this value may not be passed")]),s._v(" "),a("td",[s._v("Array")]),s._v(" "),a("td",[s._v("[{label: 1}, {label: 2}]")]),s._v(" "),a("td",[s._v("[]")])])])])]),s._v(" "),a("li",[a("p",[s._v("CubeTabPanel")]),s._v(" "),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("Needed")]),s._v(" "),a("th",[s._v("Default")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("label")]),s._v(" "),a("td",[s._v("determine that the panels is displayed")]),s._v(" "),a("td",[s._v("String/Number")]),s._v(" "),a("td",[s._v("yes")]),s._v(" "),a("td",[s._v("-")])])])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("p",[s._v("CubeTab")]),s._v(" "),a("table",[a("thead",[a("tr",[a("th",[s._v("Attribute")]),s._v(" "),a("th",[s._v("Description")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("default")]),s._v(" "),a("td",[a("code",{pre:!0},[s._v("cube-tab")]),s._v("'s text")])]),s._v(" "),a("tr",[a("td",[s._v("icon")]),s._v(" "),a("td",[s._v("Generally used to display icon")])])])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("p",[s._v("CubeTabBar")]),s._v(" "),a("table",[a("thead",[a("tr",[a("th",[s._v("Event Name")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("parameter")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("click")]),s._v(" "),a("td",[s._v("Dispatched when the tab is clicked")]),s._v(" "),a("td",[s._v("The label value of the tab which is selected")])]),s._v(" "),a("tr",[a("td",[s._v("change")]),s._v(" "),a("td",[s._v("Dispatched when tab changed")]),s._v(" "),a("td",[s._v("The label value of the tab which is selected")])])])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("p",[s._v("CubeTabBar")]),s._v(" "),a("p",[s._v("This method works when the instance's "),a("code",{pre:!0},[s._v("showSlider")]),s._v(" property is set to true.")]),s._v(" "),a("table",[a("thead",[a("tr",[a("th",[s._v("Method name")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Parameter Type")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("setSliderTransform")]),s._v(" "),a("td",[s._v("Change the underscore's transformX of the "),a("code",{pre:!0},[s._v("cube-tab-bar")]),s._v(" component. If you pass Number, it will be converted into a pixel, or you can pass a String with units")]),s._v(" "),a("td",[s._v("Number/String")])])])])])])}]}}});
\ No newline at end of file
docs/js/manifest.7a076d4565892bc942ca.js → docs/js/manifest.c9808602e28ad090c11c.js
浏览文件 @ 61db0319
!function(e){function c(a){if(d[a])return d[a].exports;var f=d[a]={i:a,l:!1,exports:{}};return e[a].call(f.exports,f,f.exports,c),f.l=!0,f.exports}var a=window.webpackJsonp;window.webpackJsonp=function(d,b,n){for(var r,t,o,u=0,i=[];u<d.length;u++)t=d[u],f[t]&&i.push(f[t][0]),f[t]=0;for(r in b)Object.prototype.hasOwnProperty.call(b,r)&&(e[r]=b[r]);for(a&&a(d,b,n);i.length;)i.shift()();if(n)for(u=0;u<n.length;u++)o=c(c.s=n[u]);return o};var d={},f={88:0};c.e=function(e){function a(){r.onerror=r.onload=null,clearTimeout(t);var c=f[e];0!==c&&(c&&c[1](new Error("Loading chunk "+e+" failed.")),f[e]=void 0)}var d=f[e];if(0===d)return new Promise(function(e){e()});if(d)return d[2];var b=new Promise(function(c,a){d=f[e]=[c,a]});d[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:"9cf876f3d8a0dd614939",1:"8cbaaf36e614ee3d9b86",2:"4ef293d219ab6dbb0cfc",3:"b853b2b2a3c20e6bf8ed",4:"d6af701a543a8fb02755",5:"7738cb81cbf78c9a7d4e",6:"87961418e2ec57592899",7:"5d0ba1ee77bc48c07460",8:"1c808f95c01ce3af0a84",9:"ee5f205a52f215ac1d6b",10:"6d971c81a0173e0e8dbb",11:"dc382ddc7935c9f46796",12:"8a95caad26d35f69cbfd",13:"d9efc3abe297630dced6",14:"c07f00aea03c853eb3bb",15:"8f30968a6de84c59ab95",16:"fecd9b55f3a8c82bed03",17:"525c569d081c374806df",18:"10fbc962ddf6f40615a5",19:"52963edc96ae84a7bfdd",20:"c04daef968469e473303",21:"cb189a8cf79811d781a3",22:"4dda6914eb3af65a98b6",23:"d8da73850f2877346ccb",24:"752a38943e96cf60277b",25:"9fcda5e321bd3c72390d",26:"983952b33696b8abe011",27:"6bea32b9e341d571f6a1",28:"c7d7a2ecf89a1a694dd8",29:"3b75c2902bdcc82b5b80",30:"8aac53cdebdb4915c0fe",31:"419c1a92bf0f1d1ac120",32:"223fea9417aeea4d589f",33:"551a2ee444fefdc804de",34:"3fab846e8ec4ce752010",35:"24af8069939e2b59d471",36:"c33bd21fe476bee0fe7d",37:"7944bfb264a214645895",38:"38053f2330e52a1115ad",39:"57629e37a20d5facadc6",40:"7ae0ed03ac1d08c19344",41:"37c87fe8a806df7d49d0",42:"0f975771077c58c426b2",43:"b1bbadf4cf2ee91d9cca",44:"a3cd5d1196374558364a",45:"7ee6435836047c381daf",46:"44842e13f93b1d63cd1e",47:"2facf586bef89e77e43a",48:"f10d0d26214d56dd172d",49:"ad0482975a866b85d71a",50:"be2b16c223d2adb4dd39",51:"16a4eb62e51edd35803e",52:"828888411942d67bb236",53:"837a9cdee041535399f3",54:"78fb0caa1fa322b3ecfa",55:"7bfc6d989715d289e05a",56:"c9ee46c1932a1bfc3cf5",57:"744a0931565ffdfeb400",58:"72a617d7002878bb9c82",59:"6ccc2e0d9570370f6e67",60:"23f0d6290a302f7ee2fa",61:"b68bb3c2660787faa44b",62:"98332d83584ee5460b93",63:"3e33a57b63e074fd9493",64:"b8ef8edc084accc65f6b",65:"ba7ac23f388ee4886fd4",66:"656a21619bf7d0b2fa3f",67:"2de35909a537ac1cf075",68:"96977887dafb1a850101",69:"23650d770e1e9e5d3acb",70:"3431c008cc8063c7f52d",71:"fd5327b8557037d7f75c",72:"20dec4efb03f26e0d653",73:"eb96382791e8d78875e6",74:"9b5ee6bbb73addd24256",75:"473b2b1b53e1833f2911",76:"92257b20fc4bee54c033",77:"5c7dc5b3afae36086b74",78:"a7b9248744eb860c9294",79:"9b094831d2c33f9c1160",80:"e7193fef69a77d739729",81:"70087b8e30b06bb8c76e",82:"0dfb1c78f7c873e3cb49",83:"3f61d7aabaf7de62ab2b",84:"d145304ef7661bcba2ae",85:"4e0f4eb51995159a81ca"}[e]+".js";var t=setTimeout(a,12e4);return r.onerror=r.onload=a,n.appendChild(r),b},c.m=e,c.c=d,c.d=function(e,a,d){c.o(e,a)||Object.defineProperty(e,a,{configurable:!1,enumerable:!0,get:d})},c.n=function(e){var a=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(a,"a",a),a},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(a){if(d[a])return d[a].exports;var f=d[a]={i:a,l:!1,exports:{}};return e[a].call(f.exports,f,f.exports,c),f.l=!0,f.exports}var a=window.webpackJsonp;window.webpackJsonp=function(d,b,n){for(var r,t,o,u=0,i=[];u<d.length;u++)t=d[u],f[t]&&i.push(f[t][0]),f[t]=0;for(r in b)Object.prototype.hasOwnProperty.call(b,r)&&(e[r]=b[r]);for(a&&a(d,b,n);i.length;)i.shift()();if(n)for(u=0;u<n.length;u++)o=c(c.s=n[u]);return o};var d={},f={88:0};c.e=function(e){function a(){r.onerror=r.onload=null,clearTimeout(t);var c=f[e];0!==c&&(c&&c[1](new Error("Loading chunk "+e+" failed.")),f[e]=void 0)}var d=f[e];if(0===d)return new Promise(function(e){e()});if(d)return d[2];var b=new Promise(function(c,a){d=f[e]=[c,a]});d[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:"9cf876f3d8a0dd614939",1:"8cbaaf36e614ee3d9b86",2:"4ef293d219ab6dbb0cfc",3:"b853b2b2a3c20e6bf8ed",4:"d6af701a543a8fb02755",5:"7738cb81cbf78c9a7d4e",6:"87961418e2ec57592899",7:"5d0ba1ee77bc48c07460",8:"1c808f95c01ce3af0a84",9:"ee5f205a52f215ac1d6b",10:"fc9a767b22cf0dda309e",11:"dc382ddc7935c9f46796",12:"8a95caad26d35f69cbfd",13:"d9efc3abe297630dced6",14:"c07f00aea03c853eb3bb",15:"8f30968a6de84c59ab95",16:"fecd9b55f3a8c82bed03",17:"525c569d081c374806df",18:"10fbc962ddf6f40615a5",19:"52963edc96ae84a7bfdd",20:"c04daef968469e473303",21:"cb189a8cf79811d781a3",22:"4dda6914eb3af65a98b6",23:"d8da73850f2877346ccb",24:"752a38943e96cf60277b",25:"9fcda5e321bd3c72390d",26:"983952b33696b8abe011",27:"6bea32b9e341d571f6a1",28:"c7d7a2ecf89a1a694dd8",29:"3b75c2902bdcc82b5b80",30:"8aac53cdebdb4915c0fe",31:"419c1a92bf0f1d1ac120",32:"223fea9417aeea4d589f",33:"551a2ee444fefdc804de",34:"3fab846e8ec4ce752010",35:"24af8069939e2b59d471",36:"c33bd21fe476bee0fe7d",37:"7944bfb264a214645895",38:"38053f2330e52a1115ad",39:"57629e37a20d5facadc6",40:"7ae0ed03ac1d08c19344",41:"37c87fe8a806df7d49d0",42:"0f975771077c58c426b2",43:"b1bbadf4cf2ee91d9cca",44:"a3cd5d1196374558364a",45:"7ee6435836047c381daf",46:"44842e13f93b1d63cd1e",47:"2facf586bef89e77e43a",48:"f10d0d26214d56dd172d",49:"ad0482975a866b85d71a",50:"be2b16c223d2adb4dd39",51:"16a4eb62e51edd35803e",52:"3fdb2c3e01ef58d2bc2d",53:"837a9cdee041535399f3",54:"78fb0caa1fa322b3ecfa",55:"7bfc6d989715d289e05a",56:"c9ee46c1932a1bfc3cf5",57:"744a0931565ffdfeb400",58:"72a617d7002878bb9c82",59:"6ccc2e0d9570370f6e67",60:"23f0d6290a302f7ee2fa",61:"b68bb3c2660787faa44b",62:"98332d83584ee5460b93",63:"3e33a57b63e074fd9493",64:"b8ef8edc084accc65f6b",65:"ba7ac23f388ee4886fd4",66:"656a21619bf7d0b2fa3f",67:"2de35909a537ac1cf075",68:"96977887dafb1a850101",69:"23650d770e1e9e5d3acb",70:"3431c008cc8063c7f52d",71:"fd5327b8557037d7f75c",72:"20dec4efb03f26e0d653",73:"eb96382791e8d78875e6",74:"9b5ee6bbb73addd24256",75:"473b2b1b53e1833f2911",76:"92257b20fc4bee54c033",77:"5c7dc5b3afae36086b74",78:"a7b9248744eb860c9294",79:"9b094831d2c33f9c1160",80:"e7193fef69a77d739729",81:"70087b8e30b06bb8c76e",82:"0dfb1c78f7c873e3cb49",83:"3f61d7aabaf7de62ab2b",84:"d145304ef7661bcba2ae",85:"4e0f4eb51995159a81ca"}[e]+".js";var t=setTimeout(a,12e4);return r.onerror=r.onload=a,n.appendChild(r),b},c.m=e,c.c=d,c.d=function(e,a,d){c.o(e,a)||Object.defineProperty(e,a,{configurable:!1,enumerable:!0,get:d})},c.n=function(e){var a=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(a,"a",a),a},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.
先完成此消息的编辑！
想要评论请 注册 或