Vue实现全局的toast组件方式

目录Vue全局的toast组件1.创建toast组件2.创建toast.js文件3.安装并使用vue自定义toast组件使用总结Vue全局的toast组件1.创建toast组件template...

目录

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

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。