体验新版 GitCode，发现更多精彩内容 >>
webpackJsonp([11],{HXbc: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:"Swipe滑块组件"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Swipe滑块组件-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(" Swipe 滑块组件")]),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(" "),s._m(2),s._v(" "),s._m(3),s._v(" "),s._m(4),s._v(" "),s._m(5),s._v(" "),s._m(6),s._v(" "),s._m(7),s._v(" "),s._m(8),s._v(" "),s._m(9),s._v(" "),s._m(10),s._v(" "),s._m(11),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(12),s._v(" "),s._m(13),s._v(" "),s._m(14),s._v(" "),s._m(15),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(16),s._v(" "),s._m(17),s._v(" "),s._m(18),s._v(" "),s._m(19),s._v(" "),s._m(20),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(21),s._v(" "),s._m(22)])},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("blockquote",[a("p",[s._v("1.5.0 新增")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("Swipe")]),s._v(" 组件的示例相关代码在"),a("a",{attrs:{href:"https://github.com/didi/cube-ui/tree/master/example/pages/swipe"}},[s._v("这里")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[s._v("基本使用")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("Swipe")]),s._v(" 组件常见的场景是搭配 "),a("code",{pre:!0},[s._v("Scroll")]),s._v(" 组件使用，既可以纵向滚动，又可以横向左滑出一些按钮对列表项做操作，当然，"),a("code",{pre:!0},[s._v("Swipe")]),s._v(" 组件也可以单独使用。")])},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("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"swipe-wrapper"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-scroll")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-swipe")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@item-click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"onItemClick"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@btn-click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"onBtnClick"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"swipeData"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-swipe")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-scroll")]),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"),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("swipeData")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("item")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'测试1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("btns")]),s._v(": [\n {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'clear'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'不再关注'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'#c8c7cd'")]),s._v("\n },\n {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'delete'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'删除'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'#ff3a32'")]),s._v("\n }\n ]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("item")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'测试2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v("\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("btns")]),s._v(": [\n {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'clear'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'不再关注'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'#c8c7cd'")]),s._v("\n },\n {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'delete'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'删除'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'#ff3a32'")]),s._v("\n }\n ]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("item")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'测试3'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("3")]),s._v("\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("btns")]),s._v(": [\n {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'clear'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'不再关注'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'#c8c7cd'")]),s._v("\n },\n {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'delete'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'删除'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'#ff3a32'")]),s._v("\n }\n ]\n }]\n }\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n onItemClick(item) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("'click item:'")]),s._v(", item)\n },\n onBtnClick(btn, index) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (btn.action === "),a("span",{attrs:{class:"hljs-string"}},[s._v("'delete'")]),s._v(") {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createActionSheet({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'确认要删除吗'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("active")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": [\n {"),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'删除'")]),s._v("}\n ],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("onSelect")]),s._v(": "),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(".swipeData.splice(index, "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(")\n }\n }).show()\n }\n }\n }\n}\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[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",[s._v("自定义插槽")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("实际上我们更常见的需求是需要自定义列表的内容展示，因此 "),a("code",{pre:!0},[s._v("Swipe")]),s._v(" 组件也支持了插槽的使用方式，如下：")])},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("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"swipe-wrapper"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-scroll")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-swipe")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("transition-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"swipe"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[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('"swipe-item-wrapper"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"(data,index) in swipeData"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"data.item.id"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-swipe-item")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"swipeItem"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":btns")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"data.btns"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"index"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@btn-click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"onBtnClick"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@active")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"onItemActive"')]),s._v(">")]),s._v("\n "),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("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"onItemClick(data.item, index)"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item-inner"')]),s._v(">")]),s._v("\n "),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('"icon"')]),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("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"60"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("height")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"60"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":src")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"data.item.imgurl"')]),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 "),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('"text"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("h2")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item-name"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-html")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"data.item.name"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("h2")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item-desc"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-html")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"data.item.desc"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("p")]),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 "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-swipe-item")]),s._v(">")]),s._v("\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("transition-group")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-swipe")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-scroll")]),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"),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("swipeData")]),s._v(": [\n {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("item")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'3646653877'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'还不是因为你长得不好看'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("desc")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'伤感：歌词再狠，也抵不过现实伤人'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("imgurl")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'http://p.qpic.cn/music_cover/MhQ4bJBPt3Yt5icXyBGNhyPJnE9O51CqaN72iaDgvFmDKaia12UFhU5uQ/600?n=1'")]),s._v("\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("btns")]),s._v(": [\n {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'clear'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'不再关注'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'#c8c7cd'")]),s._v("\n },\n {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'delete'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'删除'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'#ff3a32'")]),s._v("\n }\n ]\n },\n {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("item")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'1789676645'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'秋水浮萍任飘渺'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("desc")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'『武侠配乐』快意恩仇江湖情'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("imgurl")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'http://p.qpic.cn/music_cover/8KfvDey9cibtZ5xkWxRic6vhXgdPic3wnB7reibI4pdPQBCP8u57uqcjsQ/600?n=1'")]),s._v("\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("btns")]),s._v(": [\n {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'clear'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'不再关注'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'#c8c7cd'")]),s._v("\n },\n {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'delete'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'删除'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'#ff3a32'")]),s._v("\n }\n ]\n },\n {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("item")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'3649034125'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'念葳蕊'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("desc")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'江海迦：热恋后哼一首歌为自己悲悯的歌'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("imgurl")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'http://p.qpic.cn/music_cover/jXFicBvicUcfIWSoCNT1OrbAoHG2fqqnrJVnGV4iaLCapWUpCKqbmAicJg/600?n=1'")]),s._v("\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("btns")]),s._v(": [\n {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'clear'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'不再关注'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'#c8c7cd'")]),s._v("\n },\n {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'delete'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'删除'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'#ff3a32'")]),s._v("\n }\n ]\n },\n ]\n }\n },\n created() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".activeIndex = "),a("span",{attrs:{class:"hljs-number"}},[s._v("-1")]),s._v("\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n onItemClick(item) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("'click item:'")]),s._v(", item)\n },\n onBtnClick(btn, index) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (btn.action === "),a("span",{attrs:{class:"hljs-string"}},[s._v("'delete'")]),s._v(") {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createActionSheet({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'确认要删除吗'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("active")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": [\n {"),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'删除'")]),s._v("}\n ],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("onSelect")]),s._v(": "),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(".swipeData.splice(index, "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(")\n }\n }).show()\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.swipeItem[index].shrink()\n }\n },\n onItemActive(index) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (index === "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".activeIndex) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v("\n }\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" ("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".activeIndex !== "),a("span",{attrs:{class:"hljs-number"}},[s._v("-1")]),s._v(") {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" activeItem = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.swipeItem["),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".activeIndex]\n activeItem.shrink()\n }\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".activeIndex = index\n }\n }\n}\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("默认插槽可以搭配 "),a("code",{pre:!0},[s._v("cube-swipe-item")]),s._v(" 组件实现列表的循环。自定义插槽非常灵活，但它也需要自己手动去写一些逻辑，比如如果你想要在列表删除的时候自定义动画，需要使用 "),a("code",{pre:!0},[s._v("transition-group")]),s._v("，需要手动去管理每个激活的 "),a("code",{pre:!0},[s._v("swipe-item")]),s._v(" 的收缩，如示例代码所示。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("code",{pre:!0},[s._v("cube-swipe")]),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("th",[s._v("可选值")]),s._v(" "),a("th",[s._v("默认值")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("data")]),s._v(" "),a("td",[s._v("用于 "),a("code",{pre:!0},[s._v("swipe")]),s._v(" 列表渲染的数据，当需要使用内置的默认插槽，此参数必传，数组的每一项是一个 Object 类型，包括 "),a("code",{pre:!0},[s._v("item")]),s._v(" 和 "),a("code",{pre:!0},[s._v("btns")]),s._v("，这俩参数见 "),a("code",{pre:!0},[s._v("cube-swipe-item")]),s._v(" 的描述。如果使用自定义插槽，可不传此值。")]),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("autoShrink")]),s._v(" "),a("td",[s._v("用于当点击滑块的按钮后，是否需要自动收缩滑块，如果使用自定义插槽，则直接给 "),a("code",{pre:!0},[s._v("cube-swipe-item")]),s._v(" 传递此值即可。")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("code",{pre:!0},[s._v("cube-swipe-item")]),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("th",[s._v("可选值")]),s._v(" "),a("th",[s._v("默认值")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("item")]),s._v(" "),a("td",[s._v("用于 "),a("code",{pre:!0},[s._v("swipe-item")]),s._v(" 列表项渲染的数据，当需要使用内置的默认插槽，此参数必传，且需要有 "),a("code",{pre:!0},[s._v("value")]),s._v(" 和 "),a("code",{pre:!0},[s._v("text")]),s._v(" 2 个字段，分别表示数据项的值和显示的文案，但如果使用自定义插槽，可不传此值。")]),s._v(" "),a("td",[s._v("Object")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("{}")])]),s._v(" "),a("tr",[a("td",[s._v("btns")]),s._v(" "),a("td",[s._v("用于 "),a("code",{pre:!0},[s._v("swipe-item")]),s._v(" 列表项渲染按钮数组，数组的每一项是一个 Object 类型，至少要包含 "),a("code",{pre:!0},[s._v("text")]),s._v(" 和 "),a("code",{pre:!0},[s._v("color")]),s._v(" 2 个字段，分别表示按钮的文案和颜色。")]),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("index")]),s._v(" "),a("td",[s._v("表示当前的 "),a("code",{pre:!0},[s._v("swpie-item")]),s._v(" 在整个列表中的索引值，必传。")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("-1")])]),s._v(" "),a("tr",[a("td",[s._v("autoShrink")]),s._v(" "),a("td",[s._v("用于当点击滑块的按钮后，是否需要自动收缩滑块。")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("code",{pre:!0},[s._v("cube-swipe")]),s._v(" 事件")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("当使用自定义插槽时，直接监听 "),a("code",{pre:!0},[s._v("cube-swipe-item")]),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("参数1")]),s._v(" "),a("th",[s._v("参数2")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("item-click")]),s._v(" "),a("td",[s._v("当列表项目被点击时派发")]),s._v(" "),a("td",[s._v("点击的列表项")]),s._v(" "),a("td",[s._v("点击项在列表中的索引")])]),s._v(" "),a("tr",[a("td",[s._v("btn-click")]),s._v(" "),a("td",[s._v("当按钮被点击时派发")]),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("ul",[a("li",[a("code",{pre:!0},[s._v("cube-swipe-item")]),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("参数1")]),s._v(" "),a("th",[s._v("参数2")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("item-click")]),s._v(" "),a("td",[s._v("当列表项目被点击时派发")]),s._v(" "),a("td",[s._v("点击的列表项")]),s._v(" "),a("td",[s._v("点击项在列表中的索引")])]),s._v(" "),a("tr",[a("td",[s._v("btn-click")]),s._v(" "),a("td",[s._v("当按钮被点击时派发")]),s._v(" "),a("td",[s._v("点击的按钮")]),s._v(" "),a("td",[s._v("点击按钮在列表中的索引")])]),s._v(" "),a("tr",[a("td",[s._v("active")]),s._v(" "),a("td",[s._v("当开始滑动某个列表项目时派发")]),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("ul",[a("li",[a("code",{pre:!0},[s._v("cube-swipe-item")]),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("tbody",[a("tr",[a("td",[s._v("shrink")]),s._v(" "),a("td",[s._v("收缩该滑块项")])])])])}]}},YVHs:function(s,t,a){s.exports=a("wCYs")},wCYs:function(s,t,a){var v=a("VU/8")(null,a("HXbc"),null,null,null);s.exports=v.exports}});
