SwipeCell 滑动单元格 - Vant 4

SwipeCell 滑动单元格

介绍

可以左右滑动来展示操作按钮的单元格组件。

引入

通过以下方式来全局注册组件，更多注册方式请参考组件注册。

import { createApp } from'vue'; import { SwipeCell } from'vant'; const app = createApp(); app.use(SwipeCell);

代码演示

基础用法

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

自定义内容

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

异步关闭

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

import { showConfirmDialog } from'vant'; exportdefault { setup() { // position 为关闭时点击的位置constbeforeClose = ({ position }) => { switch (position) { case'left': case'cell': case'outside': returntrue; case'right': returnnewPromise((resolve) => { showConfirmDialog({ title: '确定删除吗？', }) .then(() =>resolve(true)) .catch(() =>resolve(false)); }); } }; return { beforeClose }; }, };

API

Props

参数	说明	类型	默认值
name	标识符，通常为一个唯一的字符串或数字，可以在事件参数中获取到	*number	string*
left-width	指定左侧滑动区域宽度，单位为 px	*number	string*
right-width	指定右侧滑动区域宽度，单位为 px	*number	string*
before-close	关闭前的回调函数，返回 false 可阻止关闭，支持返回 Promise	*(args) => boolean	Promise<boolean>*
disabled	是否禁用滑动	boolean	false
stop-propagation	是否阻止滑动事件冒泡	boolean	false

Slots

名称	说明
default	默认显示的内容
left	左侧滑动区域的内容
right	右侧滑动区域的内容

Events

事件名	说明	回调参数
click	点击时触发	*position: 'left'
open	打开时触发	*{ name: string
close	关闭时触发	*{ name: string

beforeClose 参数

beforeClose 的第一个参数为对象，对象中包含以下属性：

参数名	说明	类型
event v4.9.4	触发关闭的事件对象	*MouseEvent
name	标识符	*string
position	关闭时的点击位置	*'left'

方法

通过 ref 可以获取到 SwipeCell 实例并调用实例方法，详见组件实例方法。

方法名	说明	参数	返回值
open	打开单元格侧边栏	position: `left	right`
close	收起单元格侧边栏	-	-

类型定义

组件导出以下类型定义：

importtype { SwipeCellSide, SwipeCellProps, SwipeCellPosition, SwipeCellInstance, } from'vant';

SwipeCellInstance 是组件实例的类型，用法如下：

import { ref } from'vue'; importtype { SwipeCellInstance } from'vant'; const swipeCellRef = ref<SwipeCellInstance>(); swipeCellRef.value?.close();

常见问题

在桌面端无法操作组件？

参见桌面端适配。