這篇文章主要介紹了vue如何實(shí)現(xiàn)消息提示全局組件,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
成都創(chuàng)新互聯(lián)公司長(zhǎng)期為上1000+客戶提供的網(wǎng)站建設(shè)服務(wù),團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年,關(guān)注不同地域、不同群體,并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù);打造開放共贏平臺(tái),與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為安溪企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè),安溪網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。
使用vue-cli3.0生成項(xiàng)目
toast全局組件編寫
/src/toast/toast.vue
<template> <div class="app-toast" v-if="isShow" :class="{'info': type=== 'info','success': type=== 'success','wraning': type=== 'wraning','danger': type=== 'danger'}">{{text}}</div> </template> <style scoped> .app-toast { position: fixed; left: 50%; top: 50%; background: #ccc; padding: 10px; border-radius: 5px; transform: translate(-50%, -50%); color: #fff; } .info { background: #00aaee; } .success { background: #00ee6b; } .wraning { background: #eea300; } .danger { background: #ee000c; } </style>
/src/toast/index.js
import vue from 'vue' import toastComponent from './toast.vue' // 組件構(gòu)造器,構(gòu)造出一個(gè) vue組件實(shí)例 const ToastConstructor = vue.extend(toastComponent) function showToast ({ text, type, duration = 2000 }) { const toastDom = new ToastConstructor({ el: document.createElement('div'), data () { return { isShow: true, // 是否顯示 text: text, // 文本內(nèi)容 type: type // 類型 } } }) // 添加節(jié)點(diǎn) document.body.appendChild(toastDom.$el) // 過渡時(shí)間 setTimeout(() => { toastDom.isShow = false }, duration) } // 全局注冊(cè) function registryToast () { vue.prototype.$toast = showToast } export default registryToast
全局注冊(cè)
/main.js
import toastRegistry from './toast/index' Vue.use(toastRegistry)
調(diào)用
/src/views/home.vue
<template> <div class="home"> <input type="button" value="顯示彈窗" @click="showToast"> </div> </template> <script> export default { name: 'home', methods: { showToast () { this.$toast({ text: '我是消息' // type: 'wraning', // duration: 3000 }) } } } </script>
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“vue如何實(shí)現(xiàn)消息提示全局組件”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
當(dāng)前名稱:vue如何實(shí)現(xiàn)消息提示全局組件
文章地址:http://bm7419.com/article28/jjdhjp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供ChatGPT、響應(yīng)式網(wǎng)站、網(wǎng)站營(yíng)銷、企業(yè)網(wǎng)站制作、外貿(mào)建站、商城網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)