vant/src/swipe-cell

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

<van-swipe-cell>
  <template #left>
    <van-button square type="primary" text="Select" />
  </template>
  <van-cell :border="false" title="Cell" value="Cell Content" />
  <template #right>
    <van-button square type="danger" text="Delete" />
    <van-button square type="primary" text="Collect" />
  </template>
</van-swipe-cell>

Custom Content

<van-swipe-cell>
  <van-card
    num="2"
    price="2.00"
    desc="Description"
    title="Title"
    class="goods-card"
    thumb="https://img.yzcdn.cn/vant/cat.jpeg"
  />
  <template #right>
    <van-button square text="Delete" type="danger" class="delete-button" />
  </template>
</van-swipe-cell>

<style>
  .goods-card {
    margin: 0;
    background-color: @white;
  }

  .delete-button {
    height: 100%;
  }
</style>

Before Close

<van-swipe-cell :before-close="beforeClose">
  <template #left>
    <van-button square type="primary" text="Select" />
  </template>
  <van-cell :border="false" title="Cell" value="Cell Content" />
  <template #right>
    <van-button square type="danger" text="Delete" />
  </template>
</van-swipe-cell>

import { Dialog } from 'vant';

export default {
  setup() {
    const beforeClose = ({ position }) => {
      switch (position) {
        case 'left':
        case 'cell':
        case 'outside':
          return true;
        case 'right':
          return new Promise((resolve) => {
            Dialog.confirm({
              title: 'Are you sure to delete?',
            }).then(resolve);
          });
      }
    };

    return { beforeClose };
  },
};

API

Props

Attribute	Description	Type	Default
name	Identifier of SwipeCell	number | string	-
left-width	Width of the left swipe area	number | string	auto
right-width	Width of the right swipe area	number | string	auto
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' | 'right' | 'cell' | 'outside'
open	Emitted when SwipeCell is opened	{ name: string | number, position: 'left' | 'right' }
close	Emitted when SwipeCell is closed	{ name: string | number, position: 'left' | 'right' | 'cell' | 'outside' }

beforeClose Params

Attribute	Description	Type
name	Name	string | number
position	Click position	'left' | 'right' | 'cell' | 'outside'

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

Get the type definition of the SwipeCell instance through SwipeCellInstance.

import { ref } from 'vue';
import type { SwipeCellInstance } from 'vant';

const swipeCellRef = ref<SwipeCellInstance>();

swipeCellRef.value?.close();

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

Name	Default Value	Description
--van-switch-cell-padding-top	var(--van-cell-vertical-padding) - 1px	-
--van-switch-cell-padding-bottom	var(--van-cell-vertical-padding) - 1px	-
--van-switch-cell-large-padding-top	var(--van-cell-large-vertical-padding) - 1px	-
--van-switch-cell-large-padding-bottom	var(--van-cell-large-vertical-padding) - 1px	-