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组件”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！