\u5F15\u5165

\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002

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

const app = createApp();
app.use(SwipeCell);

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

SwipeCell \u7EC4\u4EF6\u63D0\u4F9B\u4E86 left \u548C right \u4E24\u4E2A\u63D2\u69FD\uFF0C\u7528\u4E8E\u5B9A\u4E49\u4E24\u4FA7\u6ED1\u52A8\u533A\u57DF\u7684\u5185\u5BB9\u3002

<van-swipe-cell>
  <template #left>
    <van-button square type="primary" text="\u9009\u62E9" />
  </template>
  <van-cell :border="false" title="\u5355\u5143\u683C" value="\u5185\u5BB9" />
  <template #right>
    <van-button square type="danger" text="\u5220\u9664" />
    <van-button square type="primary" text="\u6536\u85CF" />
  </template>
</van-swipe-cell>

\u81EA\u5B9A\u4E49\u5185\u5BB9

SwipeCell \u53EF\u4EE5\u5D4C\u5957\u4EFB\u610F\u5185\u5BB9\uFF0C\u6BD4\u5982\u5D4C\u5957\u4E00\u4E2A\u5546\u54C1\u5361\u7247\u3002

<van-swipe-cell>
  <van-card
    num="2"
    price="2.00"
    desc="\u63CF\u8FF0\u4FE1\u606F"
    title="\u5546\u54C1\u6807\u9898"
    class="goods-card"
    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
  />
  <template #right>
    <van-button square text="\u5220\u9664" type="danger" class="delete-button" />
  </template>
</van-swipe-cell>

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

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

\u5F02\u6B65\u5173\u95ED

\u901A\u8FC7\u4F20\u5165 before-close \u56DE\u8C03\u51FD\u6570\uFF0C\u53EF\u4EE5\u81EA\u5B9A\u4E49\u4E24\u4FA7\u6ED1\u52A8\u5185\u5BB9\u5173\u95ED\u65F6\u7684\u884C\u4E3A\u3002

<van-swipe-cell :before-close="beforeClose">
  <template #left>
    <van-button square type="primary" text="\u9009\u62E9" />
  </template>
  <van-cell :border="false" title="\u5355\u5143\u683C" value="\u5185\u5BB9" />
  <template #right>
    <van-button square type="danger" text="\u5220\u9664" />
  </template>
</van-swipe-cell>

import { Dialog } from 'vant';

export default {
  setup() {
    // position \u4E3A\u5173\u95ED\u65F6\u70B9\u51FB\u7684\u4F4D\u7F6E
    const beforeClose = ({ position }) => {
      switch (position) {
        case 'left':
        case 'cell':
        case 'outside':
          return true;
        case 'right':
          return new Promise((resolve) => {
            Dialog.confirm({
              title: '\u786E\u5B9A\u5220\u9664\u5417\uFF1F',
            }).then(resolve);
          });
      }
    };

    return { beforeClose };
  },
};

API

Props

\u53C2\u6570	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
name	\u6807\u8BC6\u7B26\uFF0C\u901A\u5E38\u4E3A\u4E00\u4E2A\u552F\u4E00\u7684\u5B57\u7B26\u4E32\u6216\u6570\u5B57\uFF0C\u53EF\u4EE5\u5728\u4E8B\u4EF6\u53C2\u6570\u4E2D\u83B7\u53D6\u5230	number \| string	`''`
left-width	\u6307\u5B9A\u5DE6\u4FA7\u6ED1\u52A8\u533A\u57DF\u5BBD\u5EA6\uFF0C\u5355\u4F4D\u4E3A `px`	number \| string	`auto`
right-width	\u6307\u5B9A\u53F3\u4FA7\u6ED1\u52A8\u533A\u57DF\u5BBD\u5EA6\uFF0C\u5355\u4F4D\u4E3A `px`	number \| string	`auto`
before-close	\u5173\u95ED\u524D\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD4\u56DE `false` \u53EF\u963B\u6B62\u5173\u95ED\uFF0C\u652F\u6301\u8FD4\u56DE Promise	(args) => boolean \| Promise<boolean>	-
disabled	\u662F\u5426\u7981\u7528\u6ED1\u52A8	boolean	`false`
stop-propagation	\u662F\u5426\u963B\u6B62\u6ED1\u52A8\u4E8B\u4EF6\u5192\u6CE1	boolean	`false`

Slots

\u540D\u79F0	\u8BF4\u660E
default	\u9ED8\u8BA4\u663E\u793A\u7684\u5185\u5BB9
left	\u5DE6\u4FA7\u6ED1\u52A8\u533A\u57DF\u7684\u5185\u5BB9
right	\u53F3\u4FA7\u6ED1\u52A8\u533A\u57DF\u7684\u5185\u5BB9

Events

\u4E8B\u4EF6\u540D	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
click	\u70B9\u51FB\u65F6\u89E6\u53D1	position: 'left' \| 'right' \| 'cell' \| 'outside'
open	\u6253\u5F00\u65F6\u89E6\u53D1	{ name: string \| number, position: 'left' \| 'right' }
close	\u5173\u95ED\u65F6\u89E6\u53D1	{ name: string \| number, position: 'left' \| 'right' \| 'cell' \| 'outside' }

beforeClose \u53C2\u6570

beforeClose \u7684\u7B2C\u4E00\u4E2A\u53C2\u6570\u4E3A\u5BF9\u8C61\uFF0C\u5BF9\u8C61\u4E2D\u5305\u542B\u4EE5\u4E0B\u5C5E\u6027\uFF1A

\u53C2\u6570\u540D	\u8BF4\u660E	\u7C7B\u578B
name	\u6807\u8BC6\u7B26	string \| number
position	\u5173\u95ED\u65F6\u7684\u70B9\u51FB\u4F4D\u7F6E	'left' \| 'right' \| 'cell' \| 'outside'

\u65B9\u6CD5

\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 SwipeCell \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002

\u65B9\u6CD5\u540D	\u8BF4\u660E	\u53C2\u6570	\u8FD4\u56DE\u503C
open	\u6253\u5F00\u5355\u5143\u683C\u4FA7\u8FB9\u680F	position: `left \| right`	-
close	\u6536\u8D77\u5355\u5143\u683C\u4FA7\u8FB9\u680F	-	-

\u7C7B\u578B\u5B9A\u4E49

\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A

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

SwipeCellInstance \u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A

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

const swipeCellRef = ref<SwipeCellInstance>();

swipeCellRef.value?.close();

SwipeCell \u6ED1\u52A8\u5355\u5143\u683C

\u4ECB\u7ECD