Vue實現(xiàn)全局的toast組件方式
更新時間：2023年03月04日 14:01:23 作者：大曬啦
這篇文章主要介紹了Vue實現(xiàn)全局的toast組件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Vue全局的toast組件
1.創(chuàng)建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.創(chuàng)建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
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家介紹了vue?請求攔截器的配置方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
這篇文章主要為大家詳細介紹了vue模態(tài)框實現(xiàn)動態(tài)錨點，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了在vue項目中使用百度地圖的方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒借鑒價值,需要的朋友可以參考下2018-06-06
今天小編就為大家分享一篇Vuex,iView UI面包屑導航使用擴展詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue2 el-checkbox-group復選框無法選中問題及解決
這篇文章主要介紹了vue2 el-checkbox-group復選框無法選中問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
這篇文章主要介紹了vue運行環(huán)境搭建全過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
Vue向后端傳數(shù)據(jù)后端接收為null問題及解決
這篇文章主要介紹了Vue向后端傳數(shù)據(jù)后端接收為null問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue提倡的是在方法中只有對數(shù)據(jù)的處理，所以提供了事件修飾符用于DOM的事件處理，下面這篇文章主要給大家介紹了關于Vue自定義組件使用事件修飾符的相關資料,需要的朋友可以參考下2021-05-05
詳解如何在Vue3使用＜script lang=“ts“ setup＞語法糖
本文主要介紹了在Vue3使用＜script lang=“ts“ setup＞語法糖，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
這篇文章主要介紹了使用vue控制元素顯示隱藏方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08