SwipeOut
菜单抽屉, 需配合SwipeOutButton使用,常用来表示当前行信息的删除和编辑
基本使用
{
data(){
return {
isShowRight: false,
}
},
}
<a-cell>
<a-switch v-model="isShowRight">切换</a-switch>
</a-cell>
<a-swipe-out :is-show-right.sync="isShowRight">
<template slot="left">
<a-swipe-out-button type="info">更多</a-swipe-out-button>
<a-swipe-out-button type="danger">禁用</a-swipe-out-button>
</template>
<h4 class="fill">胶泥</h4>
<template slot="right">
<a-swipe-out-button type="success">编辑文章</a-swipe-out-button>
<a-swipe-out-button >删除</a-swipe-out-button>
</template>
</a-swipe-out>
API
props
| 参数 | 说明 | 类型 | 默认值 | 可选值 | 是否必选 |
|---|
| isShowLeft | 是否展开左侧菜单, 支持.sync特性 | Boolean | false | - | 否 |
| isShowRight | 是否展开右侧菜单, 支持.sync特性 | Boolean | false | - | 否 |
| isStopPropagation | 拖拽时, 是否阻止touch事件冒泡 | Boolean | false | - | 否 |
| isPreventDefault | 拖拽时, 是否阻止默认事件 | Boolean | false | - | 否 |
events
| 名称 | 说明 | 参数 | 参数类型 | 可能值 |
|---|
| open | 返回当前展开方向 | 当前展开方向 | String | left / right |
| update:isShowRight | 返回右侧菜单是否展开 | 右侧菜单是否展开 | Boolean | - |
| update:isShowLeft | 返回左侧菜单是否展开 | 左侧菜单是否展开 | Boolean | - |
slots
| 名称 | 说明 |
|---|
| default | 内容主体 |
| left | 左侧抽屉 |
| right | 右侧抽屉 |