自定义全局弹窗可在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()