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的持续时间，单位ms
                type: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 = this
            this.$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()