CellSwipe 滑动单元格

使用指南

  1. import { CellSwipe } from 'vant';
  3. Vue.use(CellSwipe);

代码演示

基础用法

  1. <van-cell-swipe :right-width="65" :left-width="65">
  2.   <span slot="left">选择</span>
  3.   <van-cell-group>
  4.     <van-cell title="单元格" value="内容" />
  5.   </van-cell-group>
  6.   <span slot="right">删除</span>
  7. </van-cell-swipe>

异步关闭

  1. <van-cell-swipe :right-width="65" :left-width="65" :on-close="onClose">
  2.   <span slot="left">选择</span>
  3.   <van-cell-group>
  4.     <van-cell title="单元格" value="内容" />
  5.   </van-cell-group>
  6.   <span slot="right">删除</span>
  7. </van-cell-swipe>
  1. export default {
  2.   methods: {
  3.     onClose(clickPosition, instance) {
  4.       switch (clickPosition) {
  5.         case 'left':
  6.         case 'cell':
  7.         case 'outside':
  8.           instance.close();
  9.           break;
  10.         case 'right':
  11.           Dialog.confirm({
  12.             message: '确定删除吗？'
  13.           }).then(() => {
  14.             instance.close();
  15.           });
  16.           break;
  17.       }
  18.     }
  19.   }
  20. }

API

参数 说明 类型 默认值
left-width 左侧滑动区域宽度 Number 0
right-width 右侧滑动区域宽度 Number 0
on-close 关闭时的回调函数 Function -

Slot

名称 说明
- 自定义显示内容
left 左侧滑动内容
right 右侧滑动内容

onClose 参数

参数 类型 说明
clickPosition String 关闭时的点击位置 (left right cell outside)
instance Object CellSwipe 实例，挂载有 close 方法

原文:

https://youzan.github.io/vant/#/zh-CN/cell-swipe