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

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

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

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

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

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

// 是否显示帖子操作
    showOptionHandle: function(show, e){
        this.isOpenOptions = show;
        let { x, y } = e.detail;
        let params = {
            show: show,
            topicIndex : this.topicIndex
        }
        if(!show){
            this.$parent.showOptionsHandle(params);
        }
    },
    // 关闭帖子吐司操作 - 外部有其他弹窗打开时，或者页面hide时
    closeOptions: function(){
        this.isOpenOptions = false;
        this.openReplyOptions = false;
    },

父级页面

    // 所有吐司操作 - 由子组件toast-item触发
    showOptionsHandle: function(){
        <!-- 同页面多个toastItem组件时，只有一个不用谢 -->
        // this.$refs.toastItem.closeOptions();
    },
    // 此页面直接关闭所有帖子的吐司
    closeToastHandle: function(){
        let param = {show:true, index: -1};
        this.isOpenReplyOptions = false;
        this.$refs.toastItem.closeOptions();
    },

    // 页面隐藏
    onHide: function(){
		this.closeToastHandle()
	},
	// 页面滚动
	onPageScroll: function(e){
		if(e.scrollTop > 150){
			// 有滚动，关闭吐司
			this.closeToastHandle();
		}
	},

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

-相关资料

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

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