vue - 关于页面全局自动关闭吐司解决方案

自定义类吐司，如

解决方案一、全局自定义吐司组件

优点： 一劳永逸；缺点： 开发难度高

  • 记录点击的坐标(x,y)
  • 具体的操作列表
  • 类型（上弹出、下弹出、左右）
  • 每个点击项的执行函数（返回父级页面，自动执行）
  • 高度一定是整个页面的高度和宽度，透明，点击、触动、隐藏都要执行关闭吐司方法

positions: fixed (y 会过高-滚动) || absoluted (高度不定)

解决方案二、有吐司的页面自定义关闭事件

（弹窗、滚动、其他吐司开启时、页面onHide/destroy、 含有自定义吐司的组件销毁时等）

优点： 简单直接； 缺点：耦合度过高、页面和组件难以维护

如： 其他吐司开启时、多个重复的组件里自定义的吐司-只开启当前

包含吐司组件中，在其开启吐司的方法定义：

  1. // 是否显示帖子操作
  2.     showOptionHandle: function(show, e){
  3.         this.isOpenOptions = show;
  4.         let { x, y } = e.detail;
  5.         let params = {
  6.             show: show,
  7.             topicIndex : this.topicIndex
  8.         }
  9.         if(!show){
  10.             this.$parent.showOptionsHandle(params);
  11.         }
  12.     },
  13.     // 关闭帖子吐司操作 - 外部有其他弹窗打开时，或者页面hide时
  14.     closeOptions: function(){
  15.         this.isOpenOptions = false;
  16.         this.openReplyOptions = false;
  17.     },

父级页面

js的methods中

  1.     // 所有吐司操作 - 由子组件toast-item触发
  2.     showOptionsHandle: function(){
  3.         <!-- 同页面多个toastItem组件时，只有一个不用谢 -->
  4.         // this.$refs.toastItem.closeOptions();
  5.     },
  6.     // 此页面直接关闭所有帖子的吐司
  7.     closeToastHandle: function(){
  8.         let param = {show:true, index: -1};
  9.         this.isOpenReplyOptions = false;
  10.         this.$refs.toastItem.closeOptions();
  11.     },
  1.     // 页面隐藏
  2.     onHide: function(){
  3.         this.closeToastHandle()
  4.     },
  5.     // 页面滚动
  6.     onPageScroll: function(e){
  7.         if(e.scrollTop > 150){
  8.             // 有滚动，关闭吐司
  9.             this.closeToastHandle();
  10.         }
  11.     },

解决方案三、 在使用吐司的页面最外层的div/view，添加点击事件，默认关闭吐司

具体实施：最外层的div/view增加 @click.self="关闭吐司", 在打开吐司的操作节点上，增加 修饰符 .stop

-相关资料

  1. <!-- 阻止单击事件继续传播 -->
  2. <a v-on:click.stop="doThis"></a>
  4. <!-- 提交事件不再重载页面 -->
  5. <form v-on:submit.prevent="onSubmit"></form>
  7. <!-- 修饰符可以串联 -->
  8. <a v-on:click.stop.prevent="doThat"></a>
  10. <!-- 只有修饰符 -->
  11. <form v-on:submit.prevent></form>
  13. <!-- 添加事件监听器时使用事件捕获模式 -->
  14. <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
  15. <div v-on:click.capture="doThis">...</div>
  17. <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
  18. <!-- 即事件不是从内部元素触发的 -->
  19. <div v-on:click.self="doThat">...</div>

以上属于个人开发实践与经验，功底有限，仅供参考