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