Vant SwipeCell slides the cell

May 07, 2021 Vant

Introduced

import Vue from 'vue';
import { SwipeCell } from 'vant';

Vue.use(SwipeCell);

Code demo

Basic usage

The SwipeCell component provides two slots, leaf and right, to define the contents of the sliding areas on both sides

<van-swipe-cell>
  <template slot="left">
    <van-button square type="primary" text="选择" />
  </template>
  <van-cell :border="false" title="单元格" value="内容" />
  <template slot="right">
    <van-button square type="danger" text="删除" />
    <van-button square type="primary" text="收藏"/>
  </template>
</van-swipe-cell>

Custom content

SwipeCell content can be nested in any content, such as a product card

<van-swipe-cell>
  <van-card
    num="2"
    price="2.00"
    desc="描述信息"
    title="商品标题"
    class="goods-card"
    thumb="https://img.yzcdn.cn/vant/cat.jpeg"
  />
  <van-button
    slot="right"
    square
    text="删除"
    type="danger"
    class="delete-button"
  />
</van-swipe-cell>

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

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

Asynchronous shutdown

By passing in the before-close callback function, you can customize the behavior when the sliding content on both sides is closed

<van-swipe-cell :before-close="beforeClose">
  <template slot="left">
    <van-button square type="primary" text="选择" />
  </template>
  <van-cell :border="false" title="单元格" value="内容" />
  <template slot="right">
    <van-button square type="danger" text="删除" />
  </template>
</van-swipe-cell>

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

Props

Parameters	Description	Type	The default
name `v2.0.4`	Identifier, which can be obtained in the event parameters	number \| string	-
left-width	Specifies the width of the sliding area on the left in `px`	number \| string	`auto`
right-width	Specifies the width of the right-hand sliding area in `px`	number \| string	`auto`
before-close `v2.3.0`	The callback function before closing	Function	-
disabled	Whether to disable sliding	boolean	`false`
stop-propagation `v2.1.0`	Whether to prevent sliding events from bubbling	boolean	`false`

Slots

Name	Description
default	Customize the display
left	Swipe the content on the left
right	Swipe on the right

Events

The name of the event	Description	Callback parameters
Click	Triggered when clicked	The click position `left` `right` `cell` `outside` )
open	Triggered on open	{ position: 'left' \| 'right' , name: string }
close	Triggered when closed	{ position: string , name: string }

BeforeClose parameter

BeforeClose's first argument is an object that contains the following properties:

The name of the argument	Description	Type
name	Identifier	string
position	The click position `left` `right` `cell` `outside` )	string
instance	SwipeCell instance, which is used to call the instance method	SwipeCell

Method

Ref allows you to get to the SwipeCell instance and call the instance method, as detailed in The Component Instance Method

The method name	Description	Parameters	Returns a value
open	Open the cell sidebar	position: `left \| right`	-
close	Put away the cell sidebar	-	-

Problems

Can't operate components on the desktop side?

See Use on the desktop side.