vue中怎么實現(xiàn)一個toast彈窗組件
本篇文章給大家分享的是有關(guān)vue中怎么實現(xiàn)一個toast彈窗組件，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
成都創(chuàng)新互聯(lián)公司基于分布式IDC數(shù)據(jù)中心構(gòu)建的平臺為眾多戶提供德陽服務(wù)器托管 四川大帶寬租用 成都機(jī)柜租用 成都服務(wù)器租用。
首先,我們來分析一下彈窗組件的特性(需求):
0. 輕量 --一個組件小于 1Kib (實際打包完不到0.8k)
1.一般都是多處使用 --需要解決每個頁面重復(fù)引用+注冊
1.一般都是跟js交互的 --無需 在 里面寫
今天,我們就抱著上面2個需求點,來實現(xiàn)一個基于vue的toast彈窗組件,下圖是最終完成的效果圖.
一. 先寫一個普通的vue組件
文件位置 /src/toast/toast.vue
我是彈窗
.wrap{
position: fixed;
left: 50%;
top:50%;
background: rgba(0,0,0,.35);
padding: 10px;
border-radius: 5px;
transform: translate(-50%,-50%);
color:#fff;
}
二. 在我們需要使用的頁面引入組件,方便看效果和錯誤
三. 實現(xiàn)動態(tài)加載組件
可以看到,已經(jīng)顯示出一個靜態(tài)的彈出層了,接下來我們就來看看如何實現(xiàn)動態(tài)彈出.
我們先在 /src/toast/ 目錄下面,新建一個 index.js , 然后在index.js里面,敲入以下代碼(由于該代碼耦合比較嚴(yán)重,所以就不拆開一行一行講解了,改成行內(nèi)注釋)
文件位置 /src/toast/index.js
import vue from 'vue'
// 這里就是我們剛剛創(chuàng)建的那個靜態(tài)組件
import toastComponent from './toast.vue'
// 返回一個 擴(kuò)展實例構(gòu)造器
const ToastConstructor = vue.extend(toastComponent)
// 定義彈出組件的函數(shù) 接收2個參數(shù), 要顯示的文本 和 顯示時間
function showToast(text, duration = 2000) {
// 實例化一個 toast.vue
const toastDom = new ToastConstructor({
el: document.createElement('div'),
data() {
return {
text:text,
show:true
}
}
})
// 把 實例化的 toast.vue 添加到 body 里
document.body.appendChild(toastDom.$el)
// 過了 duration 時間后隱藏
setTimeout(() => {toastDom.show = false} ,duration)
}
// 注冊為全局組件的函數(shù)
function registryToast() {
// 將組件注冊到 vue 的 原型鏈里去,
// 這樣就可以在所有 vue 的實例里面使用 this.$toast()
vue.prototype.$toast = showToast
}export default registryToast
附一個傳送門vue.extend 官方文檔
四. 試用
到這里,我們已經(jīng)初步完成了一個可以全局注冊和動態(tài)加載的toast組件,接下來我們來試用一下看看
在vue的入口文件(腳手架生成的話是 ./src/main.js ) 注冊一下組件
文件位置 /src/main.js
import toastRegistry from './toast/index'
// 這里也可以直接執(zhí)行 toastRegistry()
Vue.use(toastRegistry)
我們稍微修改一下使用方式,把 第二步 的引用靜態(tài)組件的代碼,改成如下
可以看到,我們已經(jīng) 不需要 在頁面里面 引入 跟 注冊 組件,就可以直接使用 this.$toast() 了.
現(xiàn)在我們已經(jīng)初步實現(xiàn)了一個彈窗.不過離成功還差一點點,缺少一個動畫,現(xiàn)在的彈出和隱藏都很生硬.
以上就是vue中怎么實現(xiàn)一個toast彈窗組件，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
重慶分公司
重慶分公司
