首先，确保你已经安装了 Vant3 组件库。你可以使用 npm 或者 yarn 进行安装：
npm install vant@next
# 或者
yarn add vant@next
然后，在你的 Vue 组件中引入并注册 SwipeCell 组件：
<template>
<div>
<van-swipe-cell
:left-width="leftWidth"
:right-width="rightWidth"
@open="onOpen"
@close="onClose"
>
<div class="cell-content">滑动我</div>
<van-button
slot="left"
type="default"
@click="onLeftClick"
>
左侧按钮
</van-button>
<van-button
slot="right"
type="danger"
@click="onRightClick"
>
右侧按钮
</van-button>
</van-swipe-cell>
</div>
</template>
<script>
import { ref } from 'vue';
import { SwipeCell, Button } from 'vant';
export default {
components: {
[SwipeCell.name]: SwipeCell,
[Button.name]: Button,
},
setup() {
const leftWidth = ref(80); // 左侧按钮宽度
const rightWidth = ref(120); // 右侧按钮宽度
const onLeftClick = () => {
console.log('点击了左侧按钮');
};
const onRightClick = () => {
console.log('点击了右侧按钮');
};
const onOpen = () => {
console.log('打开了滑动单元格');
};
const onClose = () => {
console.log('关闭了滑动单元格');
};
return {
leftWidth,
rightWidth,
onLeftClick,
onRightClick,
onOpen,
onClose,
};
},
};
</script>
<style scoped>
.cell-content {
height: 60px;
line-height: 60px;
text-align: center;
background-color: #fff;
border-bottom: 1px solid #ddd;
}
</style>
在上述例子中，我们使用 Vue 3 的 ref 函数创建了响应式的 leftWidth 和 rightWidth 变量，分别表示左侧按钮和右侧按钮的宽度。然后，我们在模板中使用 <van-swipe-cell> 标签引入了 Vant3 的 SwipeCell 组件，并通过 :left-width 和 :right-width 属性设置左侧和右侧按钮的宽度。在 <van-swipe-cell> 中，我们设置了默认的单元格内容以及左侧和右侧的按钮。
通过 @open 和 @close 监听打开和关闭事件，分别触发 onOpen 和 onClose 方法。通过 @click 监听按钮点击事件，分别触发 onLeftClick 和 onRightClick 方法。
请确保你的项目已正确配置 Vant3，并根据你的实际需求调整代码。
转载请注明出处：http://www.zyzy.cn/article/detail/5742/Vant