Swipeout 滑动菜单
概述
与 iOS 原生的滑动操作交互类似，可通过滑动显示操作菜单。
使用指南
在.vue中引入组件
<script>
import iSwipeout from 'iview-mpvue/dist/components/swipeout/swipeout'
export default {
'i-swipeout': iSwipeout
}
</script>在main.js中引入样式文件
import 'iview-mpvue/dist/components/swipeout/style/css'示例
<div class="i-swipeout-demo">
<div class="i-swipeout-demo-title">基础用法</div>
<div class="i-swipeout-demo-des">
注: 1、设置uncloseable为true时点击按钮不能关闭,必须联合toggle2来实现
2、如果传递action的话必须传递width来设置每个按钮的宽度
</div>
<i-swipeout i-class="i-swipeout-demo-item" :actions="actions">
<div slot="content">
<i-cell
i-class="i-cell-padding"
title="猛虫过江"
label="侏罗纪世界主题公园及豪华度假村被失控的恐龙们摧毁已有四年">
</i-cell>
</div>
</i-swipeout>
<i-swipeout i-class="i-swipeout-demo-item" :actions="actions" :toggle="toggle2" unclosable="true">
<div slot="content">
<i-cell
i-class="i-cell-padding"
title="点击按钮不可关闭"
label="侏罗纪世界主题公园及豪华度假村被失控的恐龙们摧毁已有四年">
</i-cell>
</div>
</i-swipeout>
<i-swipeout i-class="i-swipeout-demo-item" :actions="actions" :toggle="toggle2" :unclosable="true" @change="handlerCloseButton">
<div slot="content">
<i-cell
i-class="i-cell-padding"
title="可点击按钮关闭"
label="侏罗纪世界主题公园及豪华度假村被失控的恐龙们摧毁已有四年">
</i-cell>
</div>
</i-swipeout>
<div class="i-swipeout-demo-title">自定义右侧Button</div>
<div class="i-swipeout-demo-des">注: 右侧必须设置固定宽度。默认宽度160px</div>
<i-swipeout i-class="i-swipeout-demo-item" operateWidth="210">
<div slot="content">
<i-cell
i-class="i-cell-padding"
title="猛虫过江"
label="侏罗纪世界主题公园及豪华度假村被失控的恐龙们摧毁已有四年">
</i-cell>
</div>
<div slot="button" class="i-swipeout-demo-button-group">
<div class="i-swipeout-demo-button">点赞</div>
<div class="i-swipeout-demo-button">分享</div>
<div class="i-swipeout-demo-button">删除</div>
</div>
</i-swipeout>
<i-swipeout i-class="i-swipeout-demo-item" operateWidth="180">
<div slot="content">
<i-cell
i-class="i-cell-padding"
title="猛虫过江"
label="侏罗纪世界主题公园及豪华度假村被失控的恐龙们摧毁已有四年">
</i-cell>
</div>
<div slot="button" class="i-swipeout-demo-button-group" style="background:#2db7f5;">
<div class="i-swipeout-demo-button" style="width:60px"><i-icon size="32" type="like_fill"></i-icon></div>
<div class="i-swipeout-demo-button" style="width:60px"><i-icon size="32" type="share_fill"></i-icon></div>
<div class="i-swipeout-demo-button" style="width:60px"><i-icon size="32" type="delete_fill"></i-icon></div>
</div>
</i-swipeout>
<div class="i-swipeout-demo-title">和actionsheet联合使用</div>
<i-action-sheet :visible="visible2" :actions="actions2" :show-cancel="true" @cancel="handleCancel2" @click="handleClickItem2" :mask-closable="false">
<div slot="header" style="padding: 16px">
<div style="color: #444;font-size: 16px">确定吗？</div>
<text>删除后无法恢复哦</text>
</div>
</i-action-sheet>
<i-swipeout i-class="i-swipeout-demo-item" :operateWidth="180" :unclosable="true" :toggle="toggle">
<div slot="content">
<div class="i-swipeout-image">
<i-icon size="20" color="#FFFFFF" type="feedback_fill"></i-icon>
</div>
<div class="i-swipeout-des">
<div class="i-swipeout-des-h2">第七个小矮人</div>
<div class="i-swipeout-des-detail">乐观善良的7个小矮人原本过着简单快乐的生活，不料诅咒公主的巫婆利用小矮人进入.</div>
</div>
</div>
<div slot="button" class="i-swipeout-demo-button-group" style="background:#2db7f5;">
<div class="i-swipeout-demo-button" style="width:60px" @click="actionsTap"> <i-icon size="32" type="like_fill"></i-icon></div>
<div class="i-swipeout-demo-button" style="width:60px" @click="actionsTap"><i-icon size="32" type="share_fill"></i-icon></div>
<div class="i-swipeout-demo-button" style="width:60px" @click="actionsTap"><i-icon size="32" type="delete_fill"></i-icon></div>
</div>
</i-swipeout>
<div class="i-swipeout-demo-title">自定义样式</div>
<i-swipeout i-class="i-swipeout-demo-item" :actions="actions">
<div slot="content">
<div class="i-swipeout-image" style="background:#ff9900;">
<i-icon size="20" color="#FFFFFF" type="coupons_fill" />
</div>
<div class="i-swipeout-des">
<div class="i-swipeout-des-h2">第七个小矮人</div>
<div class="i-swipeout-des-detail">乐观善良的7个小矮人原本过着简单快乐的生活，不料诅咒公主的巫婆利用小矮人进入.</div>
</div>
</div>
</i-swipeout>
</div><script>
export default {
....
data() {
return {
visible2: false,
//小程序没有refs，所以只能用动态布尔值控制关闭
toggle : false,
toggle2 : false,
actions2: [
{
name: '删除',
color: '#ed3f14',
loading: false
}
],
actions : [
{
name : '喜欢',
color : '#fff',
fontsize : '20',
width : 100,
icon : 'like',
background : '#ed3f14'
},
{
name : '返回',
width : 100,
color : '#80848f',
fontsize : '20',
icon : 'undo'
}
]
}
},
methods: {
handleCancel2() {
this.visible2 = false
this.toggle2 = !this.toggle2
},
handleClickItem2() {
this.actions2[0].loading = true
setTimeout(() => {
this.actions2[0].loading = false
this.visible2 = false
this.toggle = !this.toggle
}, 2000)
},
handlerCloseButton() {
this.toggle2 = !this.toggle2
},
actionsTap() {
this.visible2 = true
}
}
}
</script>API
Swipeout properties
属性 | 说明 | 类型 | 默认值 |
i-class | 自定义 class 类名 | String | - |
actions | 按钮组，具体项参照后面的表格 | Array | [] |
unclosable | 点击菜单时，是否收起 | Boolean | false |
toggle | 当此值由 false 转为 true 时，收起菜单 | Boolean | false |
operate-width | 菜单项的总宽度 | Number | 160 |
Swipeout events
事件名 | 说明 | 返回值 |
v-on:change | 点击菜单项时触发 | index |
Swipeout slot
名称 | 说明 |
content | 菜单内容 |
button | 自定义按钮组 |
Swipeout actions
属性 | 说明 | 类型 | 默认值 |
name | 按钮文案 | String | - |
icon | 按钮图标 | String | - |
color | 按钮文字的颜色 | String | - |
fontsize | 字号 | String | - |
width | 宽度 | String | - |
background | 背景色 | String | - |
Last updated