Vue如何實現全局的toast組件

這篇文章主要介紹“Vue如何實現全局的toast組件”，在日常操作中，相信很多人在Vue如何實現全局的toast組件問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue如何實現全局的toast組件”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

1.創建toast組件

<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>

2.創建toast.js文件

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;}

3.安裝并使用 

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

vue自定義toast組件

//toast.js

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

//toast.less

@-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;}

使用

全局注入（main.js），this._toast(‘XXXX’)調用

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

到此，關于“Vue如何實現全局的toast組件”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！