Used for cell components that can slide left and right to display operation buttons.
\nRegister component globally via app.use, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { SwipeCell } from 'vant';\n\nconst app = createApp();\napp.use(SwipeCell);\n<van-swipe-cell>\n <template #left>\n <van-button square type="primary" text="Select" />\n </template>\n <van-cell :border="false" title="Cell" value="Cell Content" />\n <template #right>\n <van-button square type="danger" text="Delete" />\n <van-button square type="primary" text="Collect" />\n </template>\n</van-swipe-cell>\n<van-swipe-cell>\n <van-card\n num="2"\n price="2.00"\n desc="Description"\n title="Title"\n class="goods-card"\n thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"\n />\n <template #right>\n <van-button square text="Delete" 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<van-swipe-cell :before-close="beforeClose">\n <template #left>\n <van-button square type="primary" text="Select" />\n </template>\n <van-cell :border="false" title="Cell" value="Cell Content" />\n <template #right>\n <van-button square type="danger" text="Delete" />\n </template>\n</van-swipe-cell>\nimport { showConfirmDialog } from 'vant';\n\nexport default {\n setup() {\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: 'Are you sure to delete?',\n })\n .then(() => resolve(true))\n .catch(() => resolve(false));\n });\n }\n };\n\n return { beforeClose };\n },\n};\n| Attribute | \nDescription | \nType | \nDefault | \n
|---|---|---|---|
| name | \nIdentifier of SwipeCell, usually a unique string or number | \nnumber | string | \n- | \n
| left-width | \nWidth of the left swipe area | \nnumber | string | \nauto | \n
| right-width | \nWidth of the right swipe area | \nnumber | string | \nauto | \n
| before-close | \nCallback function before close | \n(args) => boolean | Promise<boolean> | \n- | \n
| disabled | \nWhether to disabled swipe | \nboolean | \nfalse | \n
| stop-propagation | \nWhether to stop touchmove event propagation | \nboolean | \nfalse | \n
| Name | \nDescription | \n
|---|---|
| default | \ncustom content | \n
| left | \ncontent of left scrollable area | \n
| right | \ncontent of right scrollable area | \n
| Event | \nDescription | \nArguments | \n
|---|---|---|
| click | \nEmitted when SwipeCell is clicked | \nposition: \'left\' | \'right\' | \'cell\' | \'outside\' | \n
| open | \nEmitted when SwipeCell is opened | \nvalue: { name: string | number, position: \'left\' | \'right\' } | \n
| close | \nEmitted when SwipeCell is closed | \nvalue: { name: string | number, position: \'left\' | \'right\' | \'cell\' | \'outside\' } | \n
| Attribute | \nDescription | \nType | \n
|---|---|---|
| name | \nName | \nstring | number | \n
| position | \nClick position | \n\'left\' | \'right\' | \'cell\' | \'outside\' | \n
Use ref to get SwipeCell instance and call instance methods.
\n| Name | \nDescription | \nAttribute | \nReturn value | \n
|---|---|---|---|
| open | \nopen SwipeCell | \nposition: left | right | \n- | \n
| close | \nclose SwipeCell | \n- | \n- | \n
The component exports the following type definitions:
\nimport type {\n SwipeCellSide,\n SwipeCellProps,\n SwipeCellPosition,\n SwipeCellInstance,\n} from 'vant';\nSwipeCellInstance is the type of component instance:
import { ref } from 'vue';\nimport type { SwipeCellInstance } from 'vant';\n\nconst swipeCellRef = ref<SwipeCellInstance>();\n\nswipeCellRef.value?.close();\n