js
import Vue from 'vue'
import Toast from './Toast.vue'
const ToastBox = Vue.extend(Toast)
var instanceToast = ''
Toast.install = function (data) {
if (!instanceToast) {
instanceToast = new ToastBox({
data
}).$mount()
document.body.appendChild(instanceToast.$el)
}
instanceToast.show = true
instanceToast.title = data.title ? data.title : ''
instanceToast.content = data.content ? data.content : ''
instanceToast.type = data.type ? data.type : 'success'
}
export default Toast
vue
<template>
<div v-show="show" class="myToast">
<div class="mask" key="1" @click="show = false" @touchmove.prevent></div>
<transition enter-active-class="animate__animated animate__fadeIn">
<div v-show="show" class="pop" key="2">
<div class="popTitle">
<a-icon v-if="type == 'error'" class="toast-icon-error" type="close-circle" />
<a-icon v-if="type == 'success'" class="toast-icon-success" type="check-circle" />
<a-icon v-if="type == 'danger'" class="toast-icon-danger" type="exclamation-circle" />
<p class="title-content">{{title}}</p>
<a-icon @click="show = false" class="toast-close" type="close" />
</div>
<p class="toast-content">{{content}}</p>
</div>
</transition>
</div>
</template>
<script>
export default {
name: 'Toast',
data() {
return {
show: false,
title: '',
content: '',
type: 'success'
}
}
}
</script>
<style lang="less" scoped>
.myToast {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 99999;
}
// 全局弹窗
.mask {
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
width: 100%;
height: 100%;
}
.pop {
min-height: 120px;
width: 380px;
background: #fff;
border-radius: 5px;
z-index: 9;
text-align: center;
animation-duration: 0.75s;
.popTitle {
line-height: 40px;
padding: 0px 20px;
text-align: left;
display: flex;
align-items: center;
height: 50px;
.title-content {
flex: 1;
font-size: 16px;
font-weight: 700;
color: rgba(0, 0, 0, 0.85);
margin: 0;
margin-left: 20px;
margin-right: 20px;
}
.toast-icon-error {
color: #f5222d;
font-size: 20px;
}
.toast-icon-success {
color: #52c41a;
font-size: 20px;
}
.toast-icon-danger {
color: #faad14;
font-size: 20px;
}
.toast-close {
color: rgba(0, 0, 0, 0.45);
cursor: pointer;
}
}
.toast-content {
padding: 0px 20px 0px 60px;
text-align: left;
}
}
</style>
main.js
import Toast from './components/Toast/index'
Vue.prototype.$Toast = Toast.install