Vue實(shí)現(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é)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue+canvas如何實(shí)現(xiàn)根據(jù)數(shù)據(jù)展示不同高度,不同漸變顏色的長(zhǎng)方體效果
這篇文章主要介紹了vue+canvas如何實(shí)現(xiàn)根據(jù)數(shù)據(jù)展示不同高度,不同漸變顏色的長(zhǎng)方體效果,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-09-09vue使用neovis操作neo4j圖形數(shù)據(jù)庫及優(yōu)缺點(diǎn)
這篇文章主要介紹了vue使用neovis操作neo4j圖形數(shù)據(jù)庫,本文給大家介紹了與常規(guī)做法的優(yōu)缺點(diǎn)對(duì)比及使用技巧,對(duì)vue?neo4j圖形數(shù)據(jù)庫相關(guān)知識(shí)感興趣的朋友一起看看吧2022-02-02Vue實(shí)現(xiàn)雙向綁定的原理以及響應(yīng)式數(shù)據(jù)的方法
這篇文章主要介紹了Vue實(shí)現(xiàn)雙向綁定的原理以及響應(yīng)式數(shù)據(jù)的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07基于Vue.js 實(shí)現(xiàn)簡(jiǎn)易拖拽指令
在 Vue.js 中,我們可以通過自定義指令的方式來實(shí)現(xiàn)拖拽功能,使得代碼更加模塊化和可復(fù)用,本文將介紹如何基于 Vue.js 實(shí)現(xiàn)一個(gè)簡(jiǎn)易的拖拽指令,感興趣的朋友跟隨小編一起看看吧2024-04-04vue源碼解讀子節(jié)點(diǎn)優(yōu)化更新
這篇文章主要為大家介紹了vue源碼解讀子節(jié)點(diǎn)優(yōu)化更新示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08Vue.js中用v-bind綁定class的注意事項(xiàng)
關(guān)于數(shù)據(jù)綁定一個(gè)常見需求就是操作元素的class列表和它的內(nèi)聯(lián)樣式。因?yàn)樗鼈兌际菍傩裕覀兛梢杂?v-bind 處理它們,但是使用v-bind綁定class的時(shí)候我們要有一些注意事項(xiàng),下面這篇文章就給大家分享了下要注意的方面,希望能對(duì)大家有所幫助,下面來一起看看吧。2016-12-12使用vue-infinite-scroll實(shí)現(xiàn)無限滾動(dòng)效果
vue-infinite-scroll插件可以無限滾動(dòng)實(shí)現(xiàn)加載更多,其作用是是當(dāng)滾動(dòng)條滾動(dòng)到距離底部的指定高度時(shí)觸發(fā)某個(gè)方法。這篇文章主要介紹了用vue-infinite-scroll實(shí)現(xiàn)無限滾動(dòng)效果,需要的朋友可以參考下2018-06-06