引入import Vue from 'vue';

import { SwipeCell } from 'vant';

Vue.use(SwipeCell);

代码演示

基础用法

SwipeCell组件提供了left和right两个插槽，用于定义两侧滑动区域的内容

自定义内容

SwipeCell内容可以嵌套任意内容，比如嵌套一个商品卡片

num="2"

price="2.00"

desc="描述信息"

title="商品标题"

class="goods-card"

thumb="https://img.yzcdn.cn/vant/cat.jpeg"

/>

slot="right"

square

text="删除"

type="danger"

class="delete-button"

/>

.goods-card {

margin: 0;

background-color: @white;

}

.delete-button {

height: 100%;

}

异步关闭

通过传入before-close回调函数，可以自定义两侧滑动内容关闭时的行为

export default {

methods: {

// position 为关闭时点击的位置

// instance 为对应的 SwipeCell 实例

beforeClose({ position, instance }) {

switch (position) {

case 'left':

case 'cell':

case 'outside':

instance.close();

break;

case 'right':

Dialog.confirm({

message: '确定删除吗？'

}).then(() => {

instance.close();

});

break;

}

}

}

}

API

Propsname v2.0.4标识符，可以在事件参数中获取到number | string-

left-width指定左侧滑动区域宽度，单位为pxnumber | stringauto

right-width指定右侧滑动区域宽度，单位为pxnumber | stringauto

before-close v2.3.0关闭前的回调函数Function-

disabled是否禁用滑动booleanfalse

stop-propagation v2.1.0是否阻止滑动事件冒泡booleanfalse

Slotsdefault自定义显示内容

left左侧滑动内容

right右侧滑动内容

Eventsclick点击时触发关闭时的点击位置 (left right cell outside)

open打开时触发{ position: 'left' | 'right' , name: string }

close关闭时触发{ position: string , name: string }

beforeClose 参数

beforeClose 的第一个参数为对象，对象中包含以下属性：name标识符string

position关闭时的点击位置 (left right cell outside)string

instanceSwipeCell 实例，用于调用实例方法SwipeCell

方法

通过 ref 可以获取到 SwipeCell 实例并调用实例方法，详见 组件实例方法open打开单元格侧边栏position: left | right-

close收起单元格侧边栏--

常见问题

在桌面端无法操作组件？