vue – 关于页面全局自动关闭吐司解决方案(uniapp)

自定义类吐司,如

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

优点: 一劳永逸;缺点: 开发难度高

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

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

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

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

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

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

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

// 是否显示帖子操作
    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;
    },
 

父级页面

jsmethods

    // 所有吐司操作 - 由子组件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,添加点击事件,默认关闭吐司

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

-相关资料

<!-- 阻止单击事件继续传播 -->
<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>
 

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

(0)
上一篇 2021年3月28日 上午11:08
下一篇 2021年3月28日 上午11:31

相关推荐

发表评论

登录后才能评论