体验新版 GitCode，发现更多精彩内容 >>
webpackJsonp([10],{"2y7F":function(s,a,t){s.exports=t("jfD8")},WwjC: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("showSlider")]),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("showSlider")]),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("WwjC"),null,null,null);s.exports=v.exports}});
