体验新版 GitCode，发现更多精彩内容 >>
webpackJsonp([21],{T9KO:function(s,t,a){s.exports=a("VFp7")},VFp7:function(s,t,a){var r=a("VU/8")(null,a("g1Cz"),null,null,null);s.exports=r.exports},g1Cz: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:"ScrollNavBar组件"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-ScrollNavBar组件-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(" ScrollNavBar 组件")]),s._v(" "),s._m(0),s._v(" "),a("p",[s._v("滚动导航条组件，效果类似于滴滴打车业务线切换。")]),s._v(" "),a("h3",{attrs:{id:"示例"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-示例-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" 示例")]),s._v(" "),s._m(1),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(2),s._v(" "),a("h3",{attrs:{id:"插槽"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-插槽-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" 插槽")]),s._v(" "),s._m(3),s._v(" "),a("h3",{attrs:{id:"事件"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-事件-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" 事件")]),s._v(" "),s._m(4),s._v(" "),a("h3",{attrs:{id:"实例方法"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-实例方法-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" 实例方法")]),s._v(" "),s._m(5)])},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("blockquote",[a("p",[s._v("1.10.0 新增")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("p",[s._v("横向，默认")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-scroll-nav-bar")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":current")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"current"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":labels")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"labels"')]),s._v(" "),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")])]),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("current")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'快车'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("labels")]),s._v(": [\n "),a("span",{attrs:{class:"hljs-string"}},[s._v("'快车'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v("'小巴'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v("'专车'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v("'顺风车'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v("'代驾'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v("'公交'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v("'自驾租车'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v("'豪华车'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v("'二手车'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v("'出租车'")]),s._v("\n ]\n }\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n changeHandler(cur) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".current = cur\n }\n }\n}\n")])]),s._v(" "),a("p",[s._v("可以通过 "),a("code",{pre:!0},[s._v("current")]),s._v(" 指定 active 的 key 值，"),a("code",{pre:!0},[s._v("labels")]),s._v(" 则是所有的 key 值的集合；当 active 的值发生变化后，会触发 "),a("code",{pre:!0},[s._v("change")]),s._v(" 事件。")])]),s._v(" "),a("li",[a("p",[s._v("竖向")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"side-container"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-scroll-nav-bar")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("direction")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"vertical"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":current")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"current"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":labels")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"labels"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":txts")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"txts"')]),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("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"props"')]),s._v(">")]),s._v("{{props.txt}}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-scroll-nav-bar")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),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("current")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'快车'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("labels")]),s._v(": [\n "),a("span",{attrs:{class:"hljs-string"}},[s._v("'快车'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v("'小巴'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v("'专车'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v("'顺风车'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v("'代驾'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v("'公交'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v("'自驾租车'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v("'豪华车'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v("'二手车'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v("'出租车'")]),s._v("\n ],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("txts")]),s._v(": [\n "),a("span",{attrs:{class:"hljs-string"}},[s._v("'1快车'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2小巴'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v("'3专车'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v("'4顺风车'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v("'5代驾'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v("'6公交'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v("'7自驾租车'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v("'8豪华车'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v("'9二手车'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v("'10出租车'")]),s._v("\n ]\n }\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n changeHandler(cur) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".current = cur\n }\n }\n}\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-stylus"}},[a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".side-container")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("300px")]),s._v("\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-top")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("20px")]),s._v("\n")])]),s._v(" "),a("p",[s._v("这是一个竖向的示例，"),a("code",{pre:!0},[s._v("direction")]),s._v(" 设置为 "),a("code",{pre:!0},[s._v("vertical")]),s._v(" 代表是一个竖向导航条样式；这里还使用了 "),a("code",{pre:!0},[s._v("txts")]),s._v(" Prop 用于指定展示文案，顺序是和 "),a("code",{pre:!0},[s._v("labels")]),s._v(" 一一对应的，如果没传入 "),a("code",{pre:!0},[s._v("txts")]),s._v("，则默认 "),a("code",{pre:!0},[s._v("txts")]),s._v(" 就等于 "),a("code",{pre:!0},[s._v("labels")]),s._v("。")]),s._v(" "),a("p",[s._v("该示例中还展示了默认作用域插槽的使用，"),a("code",{pre:!0},[s._v("props.txt")]),s._v(" 就是当前项的 txt 的值。")])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("参数")]),s._v(" "),a("th",[s._v("说明")]),s._v(" "),a("th",[s._v("类型")]),s._v(" "),a("th",[s._v("可选值")]),s._v(" "),a("th",[s._v("默认值")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("direction")]),s._v(" "),a("td",[s._v("方向，默认横向，horizontal")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[s._v("horizontal/vertical")]),s._v(" "),a("td",[s._v("horizontal")])]),s._v(" "),a("tr",[a("td",[s._v("labels")]),s._v(" "),a("td",[s._v("所有的 key 值集合")]),s._v(" "),a("td",[s._v("Array")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("[]")])]),s._v(" "),a("tr",[a("td",[s._v("txts")]),s._v(" "),a("td",[s._v("显示所有文案集合，和 labels 一一对应")]),s._v(" "),a("td",[s._v("Array")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("默认等于 labes")])]),s._v(" "),a("tr",[a("td",[s._v("current")]),s._v(" "),a("td",[s._v("当前 active 的 key 值")]),s._v(" "),a("td",[s._v("String/Number")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("''")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("名字")]),s._v(" "),a("th",[s._v("说明")]),s._v(" "),a("th",[s._v("作用域参数")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("default")]),s._v(" "),a("td",[s._v("默认内容")]),s._v(" "),a("td",[s._v("txt: 当前项文案 txt 的值"),a("br"),s._v("index: 当前索引值"),a("br"),s._v("active: 当前 active 的 key 值"),a("br"),s._v("label: 当前项 label 值，即 key 值")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("事件名")]),s._v(" "),a("th",[s._v("说明")]),s._v(" "),a("th",[s._v("参数")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("change")]),s._v(" "),a("td",[s._v("当 active 项发生改变的时候触发")]),s._v(" "),a("td",[s._v("active - 当前 active 的 key 值")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("方法名")]),s._v(" "),a("th",[s._v("说明")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("refresh")]),s._v(" "),a("td",[s._v("刷新，当内容发生变化时可用于刷新 scroll 以及重新适应位置")])])])])}]}}});
