/*! For license information please see 9217.d25ec4a4.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["9217"],{68534:function(s,a,n){"use strict";n.r(a);var t=n("80681");let l=["innerHTML"];a.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

SwipeCell \u6ED1\u52A8\u5355\u5143\u683C

\n

\u4ECB\u7ECD

\n

\u53EF\u4EE5\u5DE6\u53F3\u6ED1\u52A8\u6765\u5C55\u793A\u64CD\u4F5C\u6309\u94AE\u7684\u5355\u5143\u683C\u7EC4\u4EF6\u3002

\n

\u5F15\u5165

\n

\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

\n
import { createApp } from 'vue';\nimport { SwipeCell } from 'vant';\n\nconst app = createApp();\napp.use(SwipeCell);\n
\n

\u4EE3\u7801\u6F14\u793A

\n

\u57FA\u7840\u7528\u6CD5

\n

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

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

\u81EA\u5B9A\u4E49\u5185\u5BB9

\n

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

\n
<van-swipe-cell>\n  <van-card\n    num="2"\n    price="2.00"\n    desc="\u63CF\u8FF0\u4FE1\u606F"\n    title="\u5546\u54C1\u6807\u9898"\n    class="goods-card"\n    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"\n  />\n  <template #right>\n    <van-button square text="\u5220\u9664" type="danger" class="delete-button" />\n  </template>\n</van-swipe-cell>\n\n<style>\n  .goods-card {\n    margin: 0;\n    background-color: @white;\n  }\n\n  .delete-button {\n    height: 100%;\n  }\n</style>\n
\n

\u5F02\u6B65\u5173\u95ED

\n

\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

\n
<van-swipe-cell :before-close="beforeClose">\n  <template #left>\n    <van-button square type="primary" text="\u9009\u62E9" />\n  </template>\n  <van-cell :border="false" title="\u5355\u5143\u683C" value="\u5185\u5BB9" />\n  <template #right>\n    <van-button square type="danger" text="\u5220\u9664" />\n  </template>\n</van-swipe-cell>\n
\n
import { showConfirmDialog } from 'vant';\n\nexport default {\n  setup() {\n    // position \u4E3A\u5173\u95ED\u65F6\u70B9\u51FB\u7684\u4F4D\u7F6E\n    const beforeClose = ({ position }) => {\n      switch (position) {\n        case 'left':\n        case 'cell':\n        case 'outside':\n          return true;\n        case 'right':\n          return new Promise((resolve) => {\n            showConfirmDialog({\n              title: '\u786E\u5B9A\u5220\u9664\u5417\uFF1F',\n            })\n              .then(() => resolve(true))\n              .catch(() => resolve(false));\n          });\n      }\n    };\n\n    return { beforeClose };\n  },\n};\n
\n

API

\n

Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\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\u5230number | string\'\'
left-width\u6307\u5B9A\u5DE6\u4FA7\u6ED1\u52A8\u533A\u57DF\u5BBD\u5EA6\uFF0C\u5355\u4F4D\u4E3A pxnumber | stringauto
right-width\u6307\u5B9A\u53F3\u4FA7\u6ED1\u52A8\u533A\u57DF\u5BBD\u5EA6\uFF0C\u5355\u4F4D\u4E3A pxnumber | stringauto
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\u52A8booleanfalse
stop-propagation\u662F\u5426\u963B\u6B62\u6ED1\u52A8\u4E8B\u4EF6\u5192\u6CE1booleanfalse
\n

Slots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\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
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
click\u70B9\u51FB\u65F6\u89E6\u53D1position: \'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\' }
\n

beforeClose \u53C2\u6570

\n

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

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

\u65B9\u6CD5

\n

\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

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

\u7C7B\u578B\u5B9A\u4E49

\n

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

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

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

\n
import { ref } from 'vue';\nimport type { SwipeCellInstance } from 'vant';\n\nconst swipeCellRef = ref<SwipeCellInstance>();\n\nswipeCellRef.value?.close();\n
\n

\u5E38\u89C1\u95EE\u9898

\n

\u5728\u684C\u9762\u7AEF\u65E0\u6CD5\u64CD\u4F5C\u7EC4\u4EF6\uFF1F

\n

\u53C2\u89C1\u684C\u9762\u7AEF\u9002\u914D\u3002

\n
'},null,8,l))}}}]);