• SwipeCell 滑动单元格
    • 引入
  • 代码演示
    • 基础用法
    • 异步关闭
  • API
    • Props
    • Slots
    • Events
    • onClose 参数
    • 方法

    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