介绍
可以左右滑动来展示操作按钮的单元格组件。
引入
import { createApp } from 'vue';
import { SwipeCell } from 'vant';
const app = createApp();
app.use(SwipeCell);
代码演示
基础用法
SwipeCell 组件提供了 left 和 right 两个插槽,用于定义两侧滑动区域的内容。
自定义内容
SwipeCell 可以嵌套任意内容,比如嵌套一个商品卡片。
num="2"
price="2.00"
desc="描述信息"
title="商品标题"
class="goods-card"
thumb="https://img.yzcdn.cn/vant/cat.jpeg"
/>
.goods-card {
margin: 0;
background-color: @white;
}
.delete-button {
height: 100%;
}
异步关闭
通过传入 before-close 回调函数,可以自定义两侧滑动内容关闭时的行为。
export default {
methods: {
// position 为关闭时点击的位置