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-09vue使用neovis操作neo4j圖形數(shù)據(jù)庫及優(yōu)缺點
這篇文章主要介紹了vue使用neovis操作neo4j圖形數(shù)據(jù)庫,本文給大家介紹了與常規(guī)做法的優(yōu)缺點對比及使用技巧,對vue?neo4j圖形數(shù)據(jù)庫相關(guān)知識感興趣的朋友一起看看吧2022-02-02Vue實現(xiàn)雙向綁定的原理以及響應(yīng)式數(shù)據(jù)的方法
這篇文章主要介紹了Vue實現(xiàn)雙向綁定的原理以及響應(yīng)式數(shù)據(jù)的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-07-07使用vue-infinite-scroll實現(xiàn)無限滾動效果
vue-infinite-scroll插件可以無限滾動實現(xiàn)加載更多,其作用是是當(dāng)滾動條滾動到距離底部的指定高度時觸發(fā)某個方法。這篇文章主要介紹了用vue-infinite-scroll實現(xiàn)無限滾動效果,需要的朋友可以參考下2018-06-06