SwipeCell - Vant 4

SwipeCell

Intro

Used for cell components that can slide left and right to display operation buttons.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

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

Usage

Basic Usage

Custom Content

Before Close

import { showConfirmDialog } from'vant'; exportdefault { setup() { constbeforeClose = ({ position }) => { switch (position) { case'left': case'cell': case'outside': returntrue; case'right': returnnewPromise((resolve) => { showConfirmDialog({ title: 'Are you sure to delete?', }) .then(() =>resolve(true)) .catch(() =>resolve(false)); }); } }; return { beforeClose }; }, };

API

Props

Attribute	Description	Type	Default
name	Identifier of SwipeCell, usually a unique string or number	*number	string*
left-width	Width of the left swipe area	*number	string*
right-width	Width of the right swipe area	*number	string*
before-close	Callback function before close	*(args) => boolean	Promise<boolean>*
disabled	Whether to disabled swipe	boolean	false
stop-propagation	Whether to stop touchmove event propagation	boolean	false

Slots

Name	Description
default	custom content
left	content of left scrollable area
right	content of right scrollable area

Events

Event	Description	Arguments
click	Emitted when SwipeCell is clicked	*position: 'left'
open	Emitted when SwipeCell is opened	*value: { name: string
close	Emitted when SwipeCell is closed	*value: { name: string

beforeClose Params

Attribute	Description	Type
event v4.9.4	The event object that triggers the closing action	*MouseEvent
name	Name	*string
position	Click position	*'left'

Methods

Use ref to get SwipeCell instance and call instance methods.

Name	Description	Attribute	Return value
open	open SwipeCell	position: `left	right`
close	close SwipeCell	-	-

Types

The component exports the following type definitions:

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

SwipeCellInstance is the type of component instance:

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