SwipeCell 滑动单元格

引入

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

代码演示

基础用法

  1. <van-swipe-cell :right-width="60" :left-width="60">
  2.   <van-button
  3.     square
  4.     slot="left"
  5.     type="danger"
  6.     text="选择"
  7.   />
  8.   <van-cell
  9.     :border="false"
  10.     title="单元格"
  11.     value="内容"
  12.   />
  13.   <van-button
  14.     square
  15.     slot="right"
  16.     type="danger"
  17.     text="删除"
  18.   />
  19. </van-swipe-cell>

异步关闭

  1. <van-swipe-cell :right-width="60" :left-width="60" :on-close="onClose">
  2.   <van-button
  3.     square
  4.     slot="left"
  5.     type="danger"
  6.     text="选择"
  7.   />
  8.   <van-cell
  9.     :border="false"
  10.     title="单元格"
  11.     value="内容"
  12.   />
  13.   <van-button
  14.     square
  15.     slot="right"
  16.     type="danger"
  17.     text="删除"
  18.   />
  19. </van-swipe-cell>
  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

Props

参数说明类型默认值版本
on-close关闭时的回调函数Function--
disabled是否禁用滑动Booleanfalse1.3.4
left-width指定左侧滑动区域宽度Numberauto-
right-width指定右侧滑动区域宽度Numberauto-

Slots

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

Events

事件名说明回调参数
click点击时触发关闭时的点击位置 (left right cell outside)

onClose 参数

参数类型说明
clickPositionString关闭时的点击位置 (left right cell outside)
instanceObjectSwipeCell 实例

方法

通过 ref 可以获取到 SwipeCell 实例并调用实例方法

方法名参数返回值介绍
openposition: left | right-打开单元格侧边栏
close--收起单元格侧边栏

SwipeCell 滑动单元格 - 图1