Vue实现全局的toast组件方式
更新时间:2023年03月04日 14:01:23 作者:大晒啦
这篇文章主要介绍了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中,v-for的索引index在html中的使用方法
下面小编就为大家分享一篇在vue中,v-for的索引index在html中的使用方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03详解vue+axios给开发环境和生产环境配置不同的接口地址
这篇文章主要介绍了详解vue+axios给开发环境和生产环境配置不同的接口地址,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-08-08vue3+elementPlus table中国添加输入框并提交校验
这篇文章主要介绍了vue3+elementPlus table里添加输入框并提交校验,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-08-08
最新评论