vant在cell中加表格_SwipeCell 滑动单元格 - Vant 中文文档

介绍

可以左右滑动来展示操作按钮的单元格组件。

引入

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 为关闭时点击的位置