Vant滑动单元格点击其他位置自动关闭

简介: Vant滑动单元格点击其他位置自动关闭

一、方法

1、instance.close()
instance为SwipeCell 实例
2、this.selectComponent()
通过 selectComponent 可以获取到 SwipeCell 实例并调用实例方法
3、bind:clickbind:closebind:open在这里插入图片描述通过bind:close事件才可以获得instance,意味着触发了SwipeCell 的close事件才能关闭,但是点击页面其他空白位置时不会触发这个事件

二、思路

在打开单元格的时候将该单元格的实例存入变量中,在响应点击事件时,将变量中的实例逐个调用实例的close方法。

三、代码

data: {
  selected:[]
},

// SwipeCell的bind:open方法
onOpen(event) {
  // 根据id选择instance,id为van-swipe-cell元素设置的id
  let instance = this.selectComponent(`#${event.target.id}`);
  this.data.selected.push(instance);
},

// 放到页面的根元素上
onTap() {
  // 循环关闭
  this.data.selected.forEach(function (instance) {
    instance.close();
  });
  // 清空
  this.data.selected = [];
},
相关文章
|
4月前
【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置
【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置
|
4月前
|
Windows
Keil5中恢复默认布局-解决左边栏,底部栏位置不是默认布局
Keil5中恢复默认布局-解决左边栏,底部栏位置不是默认布局
403 0
|
4月前
VSCode如何自动换行,右侧换行间距长度,隐藏右侧代码预览(Minimap代码缩略图滚动条),比对代码差异窗口也自动换行
VSCode如何自动换行,右侧换行间距长度,隐藏右侧代码预览(Minimap代码缩略图滚动条),比对代码差异窗口也自动换行
|
1月前
|
前端开发 JavaScript
基于Vue3实现鼠标按下某个元素进行拖动,实时改变左侧或右侧元素的宽度,以及点击收起或展开的功能
本文介绍了如何在Vue3项目中实现一个鼠标拖动调整元素宽度的功能,并展示了点击按钮收起或展开侧边栏的效果,提供了完整的实现代码和操作演示。
259 0
基于Vue3实现鼠标按下某个元素进行拖动,实时改变左侧或右侧元素的宽度,以及点击收起或展开的功能
|
2月前
|
JavaScript
vue 页面向下滚动到指定位置时,顶部显示悬浮搜索框
vue 页面向下滚动到指定位置时,顶部显示悬浮搜索框
67 1
vitepress如何配置右上角的小两侧标志,利用nav标签进行修改,右侧边栏如何设置成自动弹出水平框,让原先隐藏的框能够显示出来
vitepress如何配置右上角的小两侧标志,利用nav标签进行修改,右侧边栏如何设置成自动弹出水平框,让原先隐藏的框能够显示出来
|
2月前
|
JavaScript 前端开发
vue 页面下滚到目标元素的位置,目标元素自动吸顶(自动悬浮吸附到页面顶部)
vue 页面下滚到目标元素的位置,目标元素自动吸顶(自动悬浮吸附到页面顶部)
163 0
|
4月前
在viewWillAppear函数中禁止左滑,viewWillDisappear开启左滑动产生进入下一个页面来回滑动造成无法点击点击按钮问题
在viewWillAppear函数中禁止左滑,viewWillDisappear开启左滑动产生进入下一个页面来回滑动造成无法点击点击按钮问题
29 0
|
11月前
|
前端开发 JavaScript 容器
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
61 0
|
10月前
|
开发者
jeDate日期控件的使用以及选中后点确定按钮关闭功能
jeDate日期控件的使用以及选中后点确定按钮关闭功能
139 0