本篇文章為大家展示了如何在Vue中自定義一個(gè)toast組件,內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括彝良網(wǎng)站建設(shè)、彝良網(wǎng)站制作、彝良網(wǎng)頁制作以及彝良網(wǎng)絡(luò)營銷策劃等。多年來,我們專注于互聯(lián)網(wǎng)行業(yè),利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等,向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案,彝良網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前,我們服務(wù)的客戶以成都為中心已經(jīng)輻射到彝良省份的部分城市,未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任!第一步:寫toast.vue,將樣式之類的先定下來
<template> <div v-show="showToast" class="toast" :class="position"> <div class="toast_container" v-if="type=='success'"> <div><i class="iconfont icon-check icon"></i></div> <div class="msg_container">{{message}}</div> </div> <div class="toast_container" v-else-if="type=='wrong'"> <div><i class="iconfont icon-warning-circle icon"></i></div> <div class="msg_container">{{message}}</div> </div> <div class="toast_container" v-else-if="type=='loading'"> <div><loading10></loading10></div> <div class="msg_container">{{message}}</div> </div> </div> </template> <script> import loading10 from '../loading/spiner' export default{ props:{ message:String, type:{ validator: function (value) { // 值必須是這些字符串中的一個(gè) return ['success', 'wrong', 'loading'].indexOf(value) !== -1 }, default:'success' }, duration:{ type:Number, default:3000 }, position:{ type:String, default:'middle' } }, components:{ loading10 }, data(){ return{ showToast:false } } } </script> <style scoped> .toast{ width:100%; } .toast_container{ background: rgba(0, 0, 0, 0.7); border-radius: 8px; color:#fff; margin-left:88px; margin-right:88px; text-align:center; padding-top:15px; padding-bottom: 15px; } .top{ position:absolute; top:10%; } .middle{ position:absolute; top:40%; } .bottom{ position:absolute; top:70%; } .msg_container{ margin-top:8px; margin-left:15px; margin-right:15px; line-height: 22px; font-size: 16px; word-wrap: break-word; } .icon{ font-size:30px; } </style>
一共三種樣式,成功(success),失?。╳rong),加載中(loading);
一共三種位置,上(top),中(middle),下(bottom);
所有涉及的圖案出自阿里的iconfont 手機(jī)淘寶圖標(biāo)庫。
加載中動畫是自己寫的蹩腳的加載組件(emmm,就不放出來污染大家眼睛了,需要的可以評論區(qū)知會一聲_(:з」∠)_)
第二步:寫index.js ,完成toast組件的實(shí)例化
import Vue from 'vue' import Toast from './toast' let singleToast=true; let queue=[]; function createInstance(){ // 返回一個(gè)擴(kuò)展實(shí)例構(gòu)造器 if(!queue.length||!singleToast){ const ToastConstructor = Vue.extend(Toast); // 構(gòu)造一個(gè)實(shí)例 const toastDom = new ToastConstructor({ el: document.createElement('div'), }); // 把實(shí)例化的 toast.vue 添加到 body 里 document.body.appendChild(toastDom.$el); queue.push(toastDom); singleToast=true; return toastDom; } }; // 注冊為全局組件的函數(shù) function toast(options= {}) { const toastDom = createInstance(); toastDom.message =typeof options === 'string' ? options : options.message; toastDom.type = options.type || 'success'; toastDom.duration = options.duration || 3000; toastDom.position = options.position || 'middle'; if(!toastDom.message){ toastDom.showToast =singleToast= false; }else{ toastDom.showToast=true; setTimeout(() => {toastDom.showToast =singleToast= false} ,toastDom.duration); } } // 將組件注冊到 vue 的 原型鏈里去, // 這樣就可以在所有 vue 的實(shí)例里面使用 this.$toast() // Vue.prototype.$toast = showToast Vue.prototype.$toast = toast; export default toast
設(shè)置singleToast和queue的目的在于:確保同一時(shí)期界面上只有一個(gè)toast,不能同時(shí)出現(xiàn)多個(gè)toast。
由于toast會初始化,因此為了避免在任何操作之前界面上就出現(xiàn)一個(gè)toast,用if語句判斷:
如果沒有傳入的message,則不顯示toast(這樣可以使得初始化的toast不顯示)
否則顯示,并且過一定時(shí)間消失,只有singleToast為false,說明此刻界面上沒有toast,才能再新建一個(gè)toast實(shí)例(因?yàn)榇藭r(shí)if判斷內(nèi)queue.length 不為0【初始化的toast組件本身占了一個(gè)位置】,而singleToast為false,因此可以創(chuàng)建)
第三步:使用
在main.js 添加如下代碼:
import toast from './components/toast/index' Vue.use(toast)
創(chuàng)建需要調(diào)用的Vue文件:
<template> <div> <input type="button" value="顯示彈窗" @click="showToast"> </div> </template> <script> export default { methods: { showToast () { this.$toast({message:'加載中',type:'loading',position:'bottom', duration:'2000'}); // this.$toast('成功提示'); } } } </script>
上述內(nèi)容就是如何在Vue中自定義一個(gè)toast組件,你們學(xué)到知識或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識儲備,歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
標(biāo)題名稱:如何在Vue中自定義一個(gè)toast組件-創(chuàng)新互聯(lián)
文章鏈接:http://bm7419.com/article10/cesgdo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)建站、企業(yè)建站、定制網(wǎng)站、建站公司、網(wǎng)站內(nèi)鏈、網(wǎng)站維護(hù)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容