首先，确保你已经安装了 Vant4 和 Vue.js。你可以通过 npm 或 yarn 安装：
npm install vant@next
# 或
yarn add vant@next
然后，在你的 Vue 组件中，可以像这样使用 SwipeCell 组件：
<template>
<div>
<!-- 使用 vant-swipe-cell 组件 -->
<van-swipe-cell :left-options="leftOptions" :right-options="rightOptions">
<!-- 单元格的内容放在这里 -->
<div style="height: 60px; line-height: 60px; background-color: #fff;">
滑动我
</div>
</van-swipe-cell>
</div>
</template>
<script>
import { ref } from 'vue';
import { SwipeCell } from 'vant';
export default {
components: {
[SwipeCell.name]: SwipeCell,
},
setup() {
// 左滑操作选项
const leftOptions = [
{
text: '编辑',
style: { backgroundColor: '#f4333c', color: '#fff' },
onClick: () => {
console.log('点击了编辑按钮');
},
},
];
// 右滑操作选项
const rightOptions = [
{
text: '删除',
style: { backgroundColor: '#f4333c', color: '#fff' },
onClick: () => {
console.log('点击了删除按钮');
},
},
];
return {
leftOptions,
rightOptions,
};
},
};
</script>
在这个例子中，我们使用了 van-swipe-cell 组件，通过 :left-options 和 :right-options 属性设置左滑和右滑的操作选项。在示例中，我们定义了两个选项：编辑和删除，并设置了它们的样式和点击事件。
点击编辑按钮或删除按钮时，相应的回调函数会被调用，你可以在这些回调函数中执行相应的操作。这只是一个简单的示例，你可以根据实际需求定义不同的滑动操作和样式。
转载请注明出处：http://www.zyzy.cn/article/detail/5826/Vant