SwipeCell 滑动单元格

引入

  1. import{SwipeCell}from'vant';
  2. 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. exportdefault{
  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点击时触发关闭时的点击位置 (leftrightcelloutside)

onClose 参数

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

方法

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

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

SwipeCell 滑动单元格 - 图1