webpackJsonp([48],{"2TZu":function(s,t,a){var e=a("VU/8")(null,a("fsZL"),null,null,null);s.exports=e.exports},fsZL: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:"Slide"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Slide-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(" Slide")]),s._v(" "),s._m(0),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:"Propsconfiguration"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Propsconfiguration-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 configuration")]),s._v(" "),s._m(2),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(3),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(4),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(5)])},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("Slide")]),s._v(" component, which is also encapsulated based on "),a("code",{pre:!0},[s._v("better-scroll")]),s._v(",  provides common functions like "),a("code",{pre:!0},[s._v("slider")]),s._v("  and "),a("code",{pre:!0},[s._v("swipe")]),s._v(".")])},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",[a("code",{pre:!0},[s._v("cube-slide")]),s._v(" element is the entire slide component while "),a("code",{pre:!0},[s._v("cube-slide-item")]),s._v(" element is the page of each slide and it's slot is the content of the page.")]),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-slide")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"changePage"')]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-slide-item")]),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 items"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"index"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click.native")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"clickHandler(item, index)"')]),s._v(">")]),s._v("\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("a")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":href")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.url"')]),s._v(">")]),s._v("\n      "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("img")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":src")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.image"')]),s._v(">")]),s._v("\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("a")]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-slide-item")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-slide")]),s._v(">")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-javascript"}},[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("items")]),s._v(": [\n        {\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'http://www.didichuxing.com/'")]),s._v(",\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("image")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide01.png'")]),s._v("\n        }, {\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'http://www.didichuxing.com/'")]),s._v(",\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("image")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png'")]),s._v("\n        }, {\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'http://www.didichuxing.com/'")]),s._v(",\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("image")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide03.png'")]),s._v("\n        }\n      ]\n    }\n  },\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n    changePage(current) {\n      "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("'The index of current slide is '")]),s._v(" + current)\n    },\n    clickHandler(item, index) {\n      "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(item, index)\n    }\n  }\n}\n")])])]),s._v(" "),a("li",[a("p",[s._v("Initial Index")]),s._v(" "),a("p",[s._v("Initial Index value, default 0.")]),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-slide")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":initial-index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-slide")]),s._v(">")]),s._v("\n")])])]),s._v(" "),a("li",[a("p",[s._v("Loop play")]),s._v(" "),a("p",[s._v("Loop play is turned on by default. You can cnfigure that with "),a("code",{pre:!0},[s._v("loop")]),s._v(" attribute.")]),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-slide")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-slide")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-slide")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":loop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-slide")]),s._v(">")]),s._v("\n")])])]),s._v(" "),a("li",[a("p",[s._v("Automatic play")]),s._v(" "),a("p",[s._v("Automatic play is turned on by default. You can configure that with "),a("code",{pre:!0},[s._v("auto-play")]),s._v(" attribute.")]),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-slide")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-slide")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-slide")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":auto-play")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-slide")]),s._v(">")]),s._v("\n")])])]),s._v(" "),a("li",[a("p",[s._v("Interval of automatic play")]),s._v(" "),a("p",[s._v("When automatic play is turned on, you can configure the interval with "),a("code",{pre:!0},[s._v("interval")]),s._v(" attribute.")]),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-slide")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":interval")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4000"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-slide")]),s._v(">")]),s._v("\n")])])]),s._v(" "),a("li",[a("p",[s._v("Sliding threshold of switching pages")]),s._v(" "),a("p",[s._v("You can configure the sliding threshold of switching pages with "),a("code",{pre:!0},[s._v("threshold")]),s._v(" attribute. It means that when the sliding distance exceeds the page's width * "),a("code",{pre:!0},[s._v("threshold")]),s._v(", the page is switched. Default is 0.3.")]),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-slide")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":threshold")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"0.4"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-slide")]),s._v(">")]),s._v("\n")])])]),s._v(" "),a("li",[a("p",[s._v("Speed of switching pages")]),s._v(" "),a("p",[s._v("Animation of switching costs 400 ms by default. You can cnfigure that with "),a("code",{pre:!0},[s._v("speed")]),s._v(" attribute.")]),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-slide")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":speed")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-slide")]),s._v(">")]),s._v("\n")])])]),s._v(" "),a("li",[a("p",[s._v("Allow vertical scroll behavior")]),s._v(" "),a("p",[s._v("It can not be scrolling in the vertical direction by default. You can configure that with "),a("code",{pre:!0},[s._v("allow-vertical")]),s._v(" attribute.")]),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-slide")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":allow-vertical")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-slide")]),s._v(">")]),s._v("\n")])])]),s._v(" "),a("li",[a("p",[s._v("refresh method")]),s._v(" "),a("p",[s._v("When Slide Items updated or Slide props updated, you can call "),a("code",{pre:!0},[s._v("refresh")]),s._v(" method to update Slide view.")]),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-slide")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"slide"')]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-slide-item")]),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 items"')]),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    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("a")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":href")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.url"')]),s._v(">")]),s._v("\n      "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("img")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":src")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.image"')]),s._v(">")]),s._v("\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("a")]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-slide-item")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-slide")]),s._v(">")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" item3 = {\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'http://www.didichuxing.com/'")]),s._v(",\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("image")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide03.png'")]),s._v("\n}\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("items")]),s._v(": [\n        {\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'http://www.didichuxing.com/'")]),s._v(",\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("image")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide01.png'")]),s._v("\n        },\n        {\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'http://www.didichuxing.com/'")]),s._v(",\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("image")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png'")]),s._v("\n        }\n      ]\n    }\n  },\n  mounted() {\n    setTimeout("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".items.push(item3)\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.slide.refresh()\n    }, "),a("span",{attrs:{class:"hljs-number"}},[s._v("2000")]),s._v(")\n  }\n}\n")])]),s._v(" "),a("p",[s._v("Added an new slide item 2 seconds later and called "),a("code",{pre:!0},[s._v("refresh")]),s._v(".")])]),s._v(" "),a("li",[a("p",[s._v("Modify dots style")]),s._v(" "),a("p",[s._v("Default dot, you can change it by using dots 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("cube-slide")]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dots"')]),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("\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v("\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"my-dot"')]),s._v("\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"{active: props.current === index}"')]),s._v("\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"(item, index) in props.dots"')]),s._v(">")]),s._v("\n      {{index + 1}}\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),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"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-slide")]),s._v(">")]),s._v("\n")])]),s._v(" "),a("p",[s._v("The scoped slots provide two parameters: current active index "),a("code",{pre:!0},[s._v("current")]),s._v(" and slide items length "),a("code",{pre:!0},[s._v("dots")]),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("Attribute")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Type")]),s._v(" "),a("th",[s._v("Accepted Values")]),s._v(" "),a("th",[s._v("Default")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("initialIndex")]),s._v(" "),a("td",[s._v("initial index")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("0")])]),s._v(" "),a("tr",[a("td",[s._v("loop")]),s._v(" "),a("td",[s._v("whether to loop play")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("true/false")]),s._v(" "),a("td",[s._v("true")])]),s._v(" "),a("tr",[a("td",[s._v("autoPlay")]),s._v(" "),a("td",[s._v("whether to play  automatically")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("true/false")]),s._v(" "),a("td",[s._v("true")])]),s._v(" "),a("tr",[a("td",[s._v("interval")]),s._v(" "),a("td",[s._v("interval of play")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("4000")])]),s._v(" "),a("tr",[a("td",[s._v("threshold")]),s._v(" "),a("td",[s._v("sliding threshold of switching pages")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("(0, 1)")]),s._v(" "),a("td",[s._v("0.3")])]),s._v(" "),a("tr",[a("td",[s._v("speed")]),s._v(" "),a("td",[s._v("speed of switching pages")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("400")])]),s._v(" "),a("tr",[a("td",[s._v("allowVertical")]),s._v(" "),a("td",[s._v("whether to allow vertical scrolling")]),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("direction")]),s._v(" "),a("td",[s._v("slide direction")]),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("showDots")]),s._v(" "),a("td",[s._v("whether to show the indicator dots")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("true/false")]),s._v(" "),a("td",[s._v("true")])]),s._v(" "),a("tr",[a("td",[s._v("stopPropagation")]),s._v(" "),a("td",[s._v("whether to stop propagation, which could use to solve the problem of event propagation when nest same direction slide")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("true/false")]),s._v(" "),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("Name")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Scope Parameters")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("default")]),s._v(" "),a("td",[s._v("Default content contains cube-slide-item components")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("dots")]),s._v(" "),a("td",[s._v("Dots content")]),s._v(" "),a("td",[s._v("dots: Slide items length "),a("br"),s._v(" current: current active index")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return 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("Parameters")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("change")]),s._v(" "),a("td",[s._v("triggers when current slide changes")]),s._v(" "),a("td",[s._v("index of current slide")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("Method name")]),s._v(" "),a("th",[s._v("Description")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("refresh")]),s._v(" "),a("td",[s._v("You can call this method when slide items added or removed")])])])])}]}},"qc/E":function(s,t,a){s.exports=a("2TZu")}});