<template>
    <div class="toast" v-if="show">
        {{ msg }}
    </div>
</template>
 
<style scoped>
    .toast{
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        border-radius: 3px;
        max-width: 200px;
        padding: 10px;
        background: #333;
        color: #fff;
        font-size: 14px;
        opacity: .9;
        text-align: justify;
        word-break: break-all;
        word-wrap: break-word;
    }
</style>

import toast from "@/components/toast"
export default (Vue) => {
? ? let toastComp = Vue.extend(toast);
? ? function showToast(msg , duration = 3e3){
? ? ? ? let toastDom = new toastComp({
? ? ? ? ? ? data(){
? ? ? ? ? ? ? ? return{
? ? ? ? ? ? ? ? ? ? show:true,
? ? ? ? ? ? ? ? ? ? msg
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }).$mount()
? ? ? ? document.body.appendChild(toastDom.$el);
? ? ? ? setTimeout(() => {
? ? ? ? ? ? toastDom.show = false
? ? ? ? }, duration)
? ? }
? ? Vue.prototype.$toast = showToast;
}

import toast from "@/plugins/toast";
Vue.use(toast);
 
// 组件里面使用
this.$toast("message");

const ?TOAST_CLASS = 'toast'
const ?TOAST_OUT_CLASS = 'toast out'
let innerHtml=""
function ?toast(msg,time=1000) {
? ? let body=document.querySelector('#app');
? ? if(body.querySelector('.toast')){
? ? ? ? body.removeChild(body.querySelector('.toast'))
? ? }
? ? let toastElem = document.createElement('div')
? ? toastElem.setAttribute('class',TOAST_CLASS)
? ? innerHtml = `<sapn>${msg}</sapn>`
? ? toastElem.innerHTML = innerHtml;
? ? body.appendChild(toastElem);
? ? setTimeout(function () {
? ? ? ? toastElem.setAttribute('class',TOAST_OUT_CLASS)
? ? },time)
? ? setTimeout(function () {
? ? ? ? let elm = body.querySelector('.toast');
? ? ? ? if(elm){
? ? ? ? ? ? body.removeChild(elm)
? ? ? ? }
? ? },time+1000)
 
}
export ?default toast

@-webkit-keyframes toastIn {
? 0%{
? ? opacity: 1;
? }
? 50%{
? ? opacity: 1;
? }
? 100%{
? ? opacity: 1;
? }
}
@-webkit-keyframes toastOut {
? 0%{
? ? opacity:1;
? }
? 50%{
? ? opacity:0.7;
? }
? 100%{
? ? opacity:0;
? }
}
//animation: name duration timing-function delay iteration-count direction;
.toast{
? position: fixed;
? z-index:99;
? background-color: rgba(0,0,0,0.6);
? color:#fff;
? padding:15px 25px;
? border-radius:5px;
? top: 50%;
? left:50%;
? font-size:18px;
? transform: translate(-50% , -50%);
? animation-name: toastIn;
? animation-duration: 1s;
? animation-iteration-count: 1;
? animation-delay: 0s;
}
 
.toast.out {
? animation-name: toastOut;
? animation-duration: 1s;
? animation-iteration-count: 1;
? animation-delay: 0s;
? animation-fill-mode: forwards;
}

import toast from "./utils/toast";
window._toast = toast