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’)調(diào)用
import toast from "./utils/toast"; window._toast = toast
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue+canvas如何實現(xiàn)根據(jù)數(shù)據(jù)展示不同高度,不同漸變顏色的長方體效果
這篇文章主要介紹了vue+canvas如何實現(xiàn)根據(jù)數(shù)據(jù)展示不同高度,不同漸變顏色的長方體效果,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-09-09
vue使用neovis操作neo4j圖形數(shù)據(jù)庫及優(yōu)缺點
這篇文章主要介紹了vue使用neovis操作neo4j圖形數(shù)據(jù)庫,本文給大家介紹了與常規(guī)做法的優(yōu)缺點對比及使用技巧，對vue?neo4j圖形數(shù)據(jù)庫相關(guān)知識感興趣的朋友一起看看吧2022-02-02
Vue實現(xiàn)雙向綁定的原理以及響應(yīng)式數(shù)據(jù)的方法
這篇文章主要介紹了Vue實現(xiàn)雙向綁定的原理以及響應(yīng)式數(shù)據(jù)的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
在 Vue.js 中,我們可以通過自定義指令的方式來實現(xiàn)拖拽功能,使得代碼更加模塊化和可復(fù)用,本文將介紹如何基于 Vue.js 實現(xiàn)一個簡易的拖拽指令,感興趣的朋友跟隨小編一起看看吧2024-04-04
這篇文章主要介紹了利用vue.js插入dom節(jié)點的相關(guān)資料，文中介紹的非常，對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-03-03
這篇文章主要為大家介紹了vue源碼解讀子節(jié)點優(yōu)化更新示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
關(guān)于數(shù)據(jù)綁定一個常見需求就是操作元素的class列表和它的內(nèi)聯(lián)樣式。因為它們都是屬性，我們可以用 v-bind 處理它們，但是使用v-bind綁定class的時候我們要有一些注意事項，下面這篇文章就給大家分享了下要注意的方面，希望能對大家有所幫助，下面來一起看看吧。2016-12-12
使用vue-infinite-scroll實現(xiàn)無限滾動效果
vue-infinite-scroll插件可以無限滾動實現(xiàn)加載更多，其作用是是當(dāng)滾動條滾動到距離底部的指定高度時觸發(fā)某個方法。這篇文章主要介紹了用vue-infinite-scroll實現(xiàn)無限滾動效果,需要的朋友可以參考下2018-06-06
這篇文章主要為大家詳細介紹了vue實現(xiàn)單一篩選、刪除篩選條件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要介紹了Vue父子組件屬性傳遞實現(xiàn)方法，我們主要從案例出發(fā)，用Vue3的寫法寫父子組件之間的屬性傳遞，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-02-02