uniapp 自定义全局弹窗

自定义全局弹窗可在js和.vue文件中调用，unipop样式不满足，需自定义样式。

效果图

目录结构

index.vue

<template><view class="uni-popup" v-if="isShow"><view class="uni-popup__mask uni-center ani uni-custom"></view><view class="uni-popup__wrapper center uni-center ani uni-custom"><view class="uni-popup__wrapper-box"><view class="box"><div class="title">温馨提示</div><div class="con">抱歉，由于当前用户访问量激增，部分功能加载较慢，请您耐心等待。</br></br>如有疑问，请致电咨询重庆市生态环境部门服务热线: 023-88888888。感谢您的理解与支持!</div><div class="btn"><view @click="close">取消</view></div></view></view></view></view>
</template><script>export default {data(){return {isShow:false}},props: {title: { //显示的文本type: String,default: '消息'},type: { // 主题类型，不填默认为// default-灰黑色 ，error-红色 代表错误 ，primary-蓝色 uView的主色调// success-绿色 代表成功 ，// warning-黄色 代表警告 ，info-灰色 比default浅一点type: String,default: 'success'},duration:{ //toast的持续时间，单位mstype:Number,default: 2000},position:{ //toast出现的位置type: String,default:"center"},back:{ // toast结束后，是否返回上一页，优先级低于url参数type:Boolean,default:false},icon:{ // 是否显示显示type对应的图标，为false不显示图标type:Boolean,default:true},callback:Function ,//回调函数url:String// 弹窗时间结束后跳转到指定页面},created() {let that = thisthis.$nextTick(() => {this.show()/* this.$refs.uToast.show({title: that.title,type: that.type,duration: that.duration,back:that.back,position:that.position,icon:that.icon,url:that.url,callback:that.callback}) */// x秒后删除dom节点/* setTimeout(() => {　　　　　　　　　　　　if(document.body){that.$destroy();document.body.removeChild(that.$el);}}, that.duration); */})},methods:{show() {this.isShow = true},close() {this.isShow = false// window.close()}},}
</script><style lang="scss" scoped>.box {width: 500upx;height: 662upx;background-image: url('../../static/companyImg/popup.png');background-size: 100% 100%;background-position: center;.title {display: flex;justify-content: center;padding: 50upx 0 100upx 0;color: #fff;font-size: 36upx;}.con {height: 340upx;font-size: 28upx;padding: 0 40upx ;color: #686b73;border-bottom: 1px solid #e8e9ec;}.btn {position: absolute;bottom: 40upx;width: 100%;display: flex;justify-content: center;font-size: 36upx;color: #3ca1f2;cursor: pointer;}}.uni-popup {position: fixed;/*  #ifdef  H5  */top: 0px;// top: 50px;/*  #endif  *//*  #ifndef  H5  */top: 0px;/*  #endif  */bottom: 0;left: 0;right: 0;z-index: 99999;overflow: hidden;&__mask {position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 998;background: rgba(0, 0, 0, 0.4);opacity: 0;&.ani {transition: all 0.3s;}&.uni-top,&.uni-bottom,&.uni-center {opacity: 1;}}&__wrapper {position: absolute;z-index: 999;box-sizing: border-box;&.ani {transition: all 0.3s;}&.top {top: 0;left: 0;width: 100%;transform: translateY(-100%);}&.bottom {bottom: 0;left: 0;width: 100%;transform: translateY(100%);}&.center {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;transform: scale(1.2);opacity: 0;}&-box {position: relative;box-sizing: border-box;}&.uni-custom {& .uni-popup__wrapper-box {// padding: 30upx;background: #fff;border-radius: 16px;}&.center {& .uni-popup__wrapper-box {position: relative;// max-width: 80%;margin: 0upx 30upx;// width: 100%;box-sizing: border-box;max-height: 80%;overflow-y: visible;}}&.top,&.bottom {& .uni-popup__wrapper-box {width: 100%;max-height: 500px;overflow-y: scroll;}}}&.uni-top,&.uni-bottom {transform: translateY(0);}&.uni-center {transform: scale(1);opacity: 1;}}}
</style>

index.js

import fullNameVue from './index.vue'const FullToast = {};FullToast.install = function (Vue, option) {const FullNameInstance = Vue.extend(fullNameVue);let name;const initInstance = () => {name = new FullNameInstance();let nameSpan = name.$mount().$el;document.body.appendChild(nameSpan);}Vue.prototype.$uToast = {showToast(option){initInstance();if(typeof option === 'string'){name.firstName = option;}else if(typeof option === 'object'){Object.assign(name, option);}return initInstance;}};
}export default FullToast;

main.js中注册

import uToast from './components/uToast/index'
Vue.use(uToast);

在js和vue文件中调用自定义弹窗

// js中调用
import Vue from 'vue'
const vm = new Vue()
vm.$uToast.showToast()// vue文件中调用
this.$uToast.showToast()