##功能说明
1、支持自定义弹窗文案,并自动计算弹窗的高度调整在屏幕的位置,以一直保持居中
2、支持自定义弹窗显示时长(默认2秒,单位毫秒)
3、支持回调函数,callback将在设定的时间结束后才执行
使用方式
1、将 showToast.vue 文件放置于项目的模板文件夹(个人习惯为 src/components)
2、打开 App.vue,引入vue和showToast组件,并use该组件(其实是use组件里的方法,只不过打包为一个文件了)。
template部分(举例,主要就是showToast那里):
<template> <div id="app"> <router-view></router-view> <ShowToast></ShowToast> </div> </template>
script部分:
//引入Vue import Vue from 'vue' //引入组件,@cp是我自定义的路径别名,相当于@/components/ import ShowToast from '@cp/showToast.vue' //注册使用方法 Vue.use(ShowToast) //添加模板 export default { name: 'App', components: { ShowToast }, }
3、之后在App.vue或者任意子组件里,就可以直接通过 this.$showToast(文案, 显示时间, 回调函数) 去唤起Toast弹窗了。
//默认2秒的弹窗 this.$showToast("默认2秒的弹窗"); //持续显示10秒的弹窗 this.$showToast("持续显示10秒", 10000); //执行回调函数 this.$showToast("发布成功,即将进入首页…", 2000, () => { this.$router.push({ name: "home" }); });
效果预览
组件源码
我使用的是stylus,样式在这里就随便写一下,请根据实际项目需要做调整和本地备份。
<template> <div class="common-toast"> <div class="content"> <p> <span></span> </p> </div> </div> </template> <script> const showToast = { install(Vue,options) { Vue.prototype.$showToast = function (text, duration = 2000, callback) { document.querySelector(".common-toast").style.display = "block"; const newToast = document.querySelector(".common-toast .content"); newToast.querySelector("span").innerText = text; setTimeout((w,h)=>{ w = newToast.offsetWidth; h = newToast.offsetHeight; newToast.style.marginTop = "-" + h/2 + "px"; newToast.style.marginLeft = "-" + w/2 + "px"; },10); setTimeout(()=>{ document.querySelector(".common-toast").style.display = "none"; if (typeof callback === "function"){ callback(); } }, duration); } } } export default showToast; </script> <style lang="stylus" scoped> .common-toast display none position fixed top 0 left 0 width 100% height 100% background-color rgba(0,0,0,0.6) z-index 999998 .content position absolute top 50% left 50% margin-top -1rem margin-left -3rem background-color rgba(0,0,0,0.4) box-shadow 0 0 10px rgba(0,0,0,0.2) color #fff text-align center border-radius 6px z-index 999999 p display table-cell vertical-align middle width 6rem height 2rem box-sizing border-box padding 0.2rem overflow hidden span font-size 0.3865rem vertical-align middle color #fff </style>
保存为 showToast.vue 文件到项目模板文件夹下即可,以后如果要引用,就直接引入该文件就ok。