最簡(jiǎn)單的vue消息提示全局組件的方法
簡(jiǎn)介
實(shí)現(xiàn)功能
- 自定義文本
- 自定義類型(默認(rèn),消息,成功,警告,危險(xiǎn))
- 自定義過(guò)渡時(shí)間
使用vue-cli3.0生成項(xiàng)目
toast全局組件編寫(xiě)
/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) // 過(guò)渡時(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>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue3+vite引入插件unplugin-auto-import的方法
這篇文章主要介紹了vue3+vite引入插件unplugin-auto-import的相關(guān)知識(shí),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值?,需要的朋友可以參考下2022-10-10Vue中對(duì)iframe實(shí)現(xiàn)keep alive無(wú)刷新的方法
這篇文章主要介紹了Vue中對(duì)iframe實(shí)現(xiàn)keep alive無(wú)刷新的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07vue3+ElementPlus使用lang="ts"報(bào)Unexpected?token錯(cuò)誤的解決
最近開(kāi)發(fā)中遇到了些問(wèn)題,跟大家分享下,這篇文章主要給大家介紹了關(guān)于vue3+ElementPlus使用lang="ts"報(bào)Unexpected?token錯(cuò)誤的解決辦法,需要的朋友可以參考下2023-01-01iview tabs 頂部導(dǎo)航欄和模塊切換欄的示例代碼
這篇文章主要介紹了iview tabs 頂部導(dǎo)航欄和模塊切換欄的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03Vue3封裝ElImageViewer預(yù)覽圖片的示例代碼
本文主要介紹了Vue3封裝ElImageViewer預(yù)覽圖片的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07vue3使用echart的兩種引入方式以及注意事項(xiàng)說(shuō)明
這篇文章主要介紹了vue3使用echart的兩種引入方式以及注意事項(xiàng)說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10Vue3監(jiān)聽(tīng)屬性與Computed的區(qū)別詳解
在 Vue 3 中,watch 和 computed 都是非常重要的概念,它們都可以用于觀察和響應(yīng)數(shù)據(jù)的變化,但在使用場(chǎng)景和原理上存在明顯的區(qū)別,本文將詳細(xì)解析 Vue 3 中監(jiān)聽(tīng)屬性 (watch) 和計(jì)算屬性 (computed) 的區(qū)別,需要的朋友可以參考下2024-02-02Vue.js組件實(shí)現(xiàn)選項(xiàng)卡以及切換特效
這篇文章主要為大家詳細(xì)介紹了Vue.js組件實(shí)現(xiàn)選項(xiàng)卡以及切換特效,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07