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特性Booleanfalse-
isShowRight是否展开右侧菜单, 支持.sync特性Booleanfalse-
isStopPropagation拖拽时, 是否阻止touch事件冒泡Booleanfalse-
isPreventDefault拖拽时, 是否阻止默认事件Booleanfalse-
events
名称说明参数参数类型可能值
open返回当前展开方向当前展开方向Stringleft / right
update:isShowRight返回右侧菜单是否展开右侧菜单是否展开Boolean-
update:isShowLeft返回左侧菜单是否展开左侧菜单是否展开Boolean-
slots
名称说明
default内容主体
left左侧抽屉
right右侧抽屉
中国移动
19:01:30
86%