1、创建登录组件
<template>
<transition @afterLeave="destroy">
<div v-if="show" class="login-dialog-wrapper">
<div class="content-box">
登录弹窗
<div @click="confirm">
确定
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
name: 'LoginDialog',
data() {
return {
show: true,
$$destroyed: false
}
},
methods: {
confirm() {
this.show = false
},
destroy() {
this.$el.remove()
this.$$destroyed = true
this.$destroy()
}
}
}
</script>
<style lang="less" scoped>
.login-dialog-wrapper {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
.content-box {
position: absolute;
top: 50%;
left: 50%;
z-index: 1000;
transform: translate(-50%, -50%);
min-width: 7.2rem;
overflow-x: hidden;
overflow-y: hidden;
text-align: center;
background-color: #fff;
}
}
</style>
2、loginDialogPlugin.js
import Vue from 'vue'
import loginDialog from '../components/loginDialog'
let instance = null
export default function() {
Object.defineProperty(Vue.prototype, '$login', {
// value(option) {
value() {
if (instance && !instance.$$destroyed) return
// const initObj = {
// data: typeof option === 'boolean' ? { show: option } : option
// }
const Login = Vue.extend(loginDialog)
const root = document.getElementById('app')
// if (initObj.callback) {
// initObj.methods = { callback: initObj.callback }
// delete initObj.callback
// }
// instance = new Login(initObj)
instance = new Login()
instance.$mount()
root.appendChild(instance.$el)
}
})
}
3、在main.js
import loginDialogPlugin from './plugins/loginDialogPlugin'
Vue.use(loginDialogPlugin)