JSRUN 用代码说话

SwipeCell 滑动单元格

编辑教程

SwipeCell 滑动单元格

引入

import Vue from 'vue';
import { SwipeCell } from 'vant';

Vue.use(SwipeCell);

代码演示

基础用法

SwipeCell组件提供了left和right两个插槽,用于定义两侧滑动区域的内容

<van-swipe-cell>
  <template slot="left">
    <van-button square type="primary" text="选择" />
  </template>
  <van-cell :border="false" title="单元格" value="内容" />
  <template slot="right">
    <van-button square type="danger" text="删除" />
    <van-button square type="primary" text="收藏"/>
  </template>
</van-swipe-cell>

自定义内容

SwipeCell内容可以嵌套任意内容,比如嵌套一个商品卡片

<van-swipe-cell>
  <van-card
    num="2"
    price="2.00"
    desc="描述信息"
    title="商品标题"
    class="goods-card"
    thumb="https://img.yzcdn.cn/vant/cat.jpeg"
  />
  <van-button
    slot="right"
    square
    text="删除"
    type="danger"
    class="delete-button"
  />
</van-swipe-cell>

<style>
.goods-card {
  margin: 0;
  background-color: @white;
}

.delete-button {
  height: 100%;
}
</style>

异步关闭

通过传入before-close回调函数,可以自定义两侧滑动内容关闭时的行为

<van-swipe-cell :before-close="beforeClose">
  <template slot="left">
    <van-button square type="primary" text="选择" />
  </template>
  <van-cell :border="false" title="单元格" value="内容" />
  <template slot="right">
    <van-button square type="danger" text="删除" />
  </template>
</van-swipe-cell>


export default {
  methods: {
    // position 为关闭时点击的位置
    // instance 为对应的 SwipeCell 实例
    beforeClose({ position, instance }) {
      switch (position) {
        case 'left':
        case 'cell':
        case 'outside':
          instance.close();
          break;
        case 'right':
          Dialog.confirm({
            message: '确定删除吗?'
          }).then(() => {
            instance.close();
          });
          break;
      }
    }
  }
}

API

Props

参数 说明 类型 默认值
name v2.0.4 标识符,可以在事件参数中获取到 number丨string -
left-width 指定左侧滑动区域宽度,单位为px number丨string auto
right-width 指定右侧滑动区域宽度,单位为px number丨string auto
before-close v2.3.0 关闭前的回调函数 Function -
disabled 是否禁用滑动 boolean false
stop-propagation v2.1.0 是否阻止滑动事件冒泡 boolean false

Slots

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

Events

事件名 说明 回调参数
click 点击时触发 关闭时的点击位置 (left right cell outside)
open 打开时触发 { position: 'left'丨'right' , name: string }
close 关闭时触发 { position: string , name: string }

beforeClose 参数

beforeClose 的第一个参数为对象,对象中包含以下属性:

参数名 说明 类型
name 标识符 string
position 关闭时的点击位置 (left right cell outside) string
instance SwipeCell 实例,用于调用实例方法 SwipeCell

方法

通过 ref 可以获取到 SwipeCell 实例并调用实例方法,详见 组件实例方法

方法名 说明 参数 返回值
open 打开单元格侧边栏 position: left丨right -
close 收起单元格侧边栏 - -

实例

JSRUN闪电教程系统是国内最先开创的教程维护系统, 所有工程师都可以参与共同维护的闪电教程,让知识的积累变得统一完整、自成体系。 大家可以一起参与进共编,让零散的知识点帮助更多的人。
X
支付宝
9.99
无法付款,请点击这里
金额: 0
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
如有疑问请联系QQ:565830900
正在生成二维码, 此过程可能需要15秒钟