import {
App, createApp } from 'vue'
import CommonToast from '@/components/toast/common/CommonToast.vue'
const commonToastInstance = {
} as any
let root = {
} as HTMLElement
let app = {
} as any
commonToastInstance.message = (data :string) => {
app = createApp(CommonToast)
root = document.createElement('div')
root.setAttribute('id', 'commonToast')
document.body.appendChild(root)
app.provide('tips', data)
app.mount('#commonToast')
setTimeout(() => {
app.unmount()
document.body.removeChild(root)
root = {
} as HTMLElement
app = {
} as App
}, 2000)
}
export default commonToastInstance
<template>
<div class="common-toast">
<div class="content">
{
{ tips }}
</div>
</div>
</template>
<script lang="ts">
import {
Vue, Options } from 'vue-class-component'
@Options({
inject: ['tips']
})
export default class CommonToast extends Vue {
}
</script>
<style lang="less" scoped>
.common-toast {
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0px;
position: fixed;
display: flex;
align-items: center;
justify-content: center;
z-index:333;
}
.content {
max-width: 240px;
border-radius: 3px;
padding: 15px 20px;
background: rgba(0, 0, 0, 1);
color: #eeeeee;
animation: toast 0.5s ease-in-out;
}
@keyframes toast {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>