import{o as a,a as t,y as n}from"./vue-libs.b44bc779.js";const l={class:"van-doc-markdown-body"},e=n(`

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://fastly.jsdelivr.net/npm/@vant/assets/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

AttributeDescriptionTypeDefault
nameIdentifier of SwipeCell, usually a unique string or numbernumber | string-
left-widthWidth of the left swipe areanumber | stringauto
right-widthWidth of the right swipe areanumber | stringauto
before-closeCallback function before close(args) => boolean | Promise<boolean>-
disabledWhether to disabled swipebooleanfalse
stop-propagationWhether to stop touchmove event propagationbooleanfalse

Slots

NameDescription
defaultcustom content
leftcontent of left scrollable area
rightcontent of right scrollable area

Events

EventDescriptionArguments
clickEmitted when SwipeCell is clickedposition: 'left' | 'right' | 'cell' | 'outside'
openEmitted when SwipeCell is openedvalue: { name: string | number, position: 'left' | 'right' }
closeEmitted when SwipeCell is closedvalue: { name: string | number, position: 'left' | 'right' | 'cell' | 'outside' }

beforeClose Params

AttributeDescriptionType
nameNamestring | number
positionClick position'left' | 'right' | 'cell' | 'outside'

Methods

Use ref to get SwipeCell instance and call instance methods.

NameDescriptionAttributeReturn value
openopen SwipeCellposition: left | right-
closeclose SwipeCell--

Types

The component exports the following type definitions:

import type {
  SwipeCellSide,
  SwipeCellProps,
  SwipeCellPosition,
  SwipeCellInstance,
} from 'vant';

SwipeCellInstance is the type of component instance:

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

const swipeCellRef = ref<SwipeCellInstance>();

swipeCellRef.value?.close();
`,14),p=[e],i={__name:"README",setup(c,{expose:s}){return s({frontmatter:{}}),(o,h)=>(a(),t("div",l,p))}};export{i as default};