之前在调试项目的时候，登录过期以及未登录状态时，
要提示用户未登录，我用的时element ui自带的消息提示组件，
但是UI说太丑了，就做了张图给我，要求使用一个自定义的全局组件，
我是这样做的;
首先创建一个弹框提示组件，就是一个普通的就行，我的组件：
Confirm.vue:
<template>
<div class="wrap" v-if="isShow" @touchmove.prevent>
<div class="relogin_content">
<div class="relogin_close_btn" @click="close">
</div>
<div class="relogin_btn" @click="ok">
立即登录
</div>
<div class="relogin_text">
{{content}}
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
// 弹窗内容
isShow: true,
content: ''
};
},
methods: {
close() {
this.isShow = false
},
ok() {
// console.log('this.$router=',router)
// router.push({path:'/login'})
this.isShow = false
}
}
};
</script>
<style lang="less" scoped>
.relogin_text{
100%;
height: 6vw;
position: absolute;
top: 8vw;
left: 0vw;
display: flex;
align-items: center;
justify-content: center;
font-size: 4vw;
}
.relogin_btn{
40vw;
height: 10vw;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 20vw;
left: 15vw;
background: #ff3756;
color: white;
border-radius: 6vw;
letter-spacing: 1vw;
font-size: 4vw;
}
.relogin_close_btn{
5vw;
height: 5vw;
background: url('../../assets/image/relogin_close_btn.png');
background-size: 100% 100%;
position: absolute;
top: 3vw;
left: 62vw;
}
.relogin_content{
70vw;
height: 35vw;
background: url('../../assets/image/relogin_content.png');
background-size: 100% 100%;
position: absolute;
top: 35vh;
left: 15vw;
}
.wrap{
position: fixed;
bottom: 0;
left: 0;
100vw;
height:100vh;
background:url('../../assets/image/relogin_bg.png');
background-size: 100% 100%;
z-index: 2001;
}
.wrap::after{
content: "";
display: inline-block;
height: 100%;
0;
vertical-align: middle;
}
</style>
上面使用了三张图片，relogin_bg是全屏的遮罩层，relogin_content_bg是弹框主体部分白色背景，close_bg是右上角的关闭x图标；
两个事件，OK事件绑定在立即登录也就是登录按钮，close是关闭按钮图标上；
可以先把组件引入页面调试一下，没有问题后在当前组件同级别目录创建 confim.js
内容如下：
import Vue from 'vue';
import confirm from './Confirm.vue';
let confirmConstructor = Vue.extend(confirm);
let theConfirm = function (content) {
return new Promise((res, rej) => {
let confirmDom = new confirmConstructor({
el: document.createElement('div')
})
document.body.appendChild(confirmDom.$el); //将构造器实例挂载对象插入body里面
confirmDom.content = content; //传入字段
})
}
export default theConfirm;
具体步骤注释都有说明，要注意的是import引入.vue组件路径别搞错了，
然后在main.js引入一下：
import confirm from './components/CusConfirm/confirm'
然后在实例上挂载下：
Vue.prototype.$relogin = confirm;
在需要使用的页面：
就像这样：
toLogin(){
// console.log('router1=',this.$router)
this.$relogin("您还未登录，请先登录奥~").then(() => {}).catch(() => {});
}
其中可以传值，可以是字符串也可以是对象，不过在组件中要对应起来，
很多人都是在构造器实例中的回调注册触发事件的，不过在我这就好像失效了
不过在组件的页面中直接注册事件也没啥问题嘛，重要的是可以传参就很香，
其实在这个extend的实例化对象中，我有拿到在组件中注册的OK，以及close函数，
但是不知道咋个触发，所以就直接写在页面中了；；
需要的注意的是，在这个页面中不可以直接使用动态路由跳转，因为此时的页面内
this指向extend实例，跳转的话要像这样
import router from '../../router/index'
在组件中引入暴露的路由实例，然后使用
router.push({path:'/login'})
进行跳转；
如果需要在main.js中使用则直接
confirm("登录过期，请重新登录！").then(() => {}).catch(() => {})
这样就可以了，毕竟上面，我们是这样引入的
import confirm from './components/CusConfirm/confirm'
OK，小弟才疏学浅，还望大佬不吝赐教！