vex是一個非常輕量(壓縮后只有5.5KB)的對話框組件怪得,它的API簡單易用,適用于桌面和移動瀏覽器頁面舶掖,不依賴于其他庫球昨,還可以根據(jù)自己的需要快速定制。
這里簡單說一下它的高級用法:阻止默認點擊消失眨攘。
vex實例默認在打開的狀態(tài)下主慰,點擊對話框上的任意位置會導致對話框隱藏并從DOM中移除。但經(jīng)常遇到一些場景鲫售,需要讓對話框保持打開的狀態(tài)共螺,并且屏蔽用戶點擊。比如用戶上傳文件時情竹,彈出一個上傳進度對話框藐不,需要在上傳過程中禁止用戶點擊導致對話框關閉,直到文件上傳完成后秦效,才能關掉對話框雏蛮。
根據(jù)官方提供的文檔,vex.defaultOptions
除接受原始類型的參數(shù)值外阱州,還接受三個回調函數(shù):
- afterOpen
- afterClose
- beforeClose
我們可以通過把beforeClose
的返回值設置為false
來阻止對話框關閉挑秉,這樣一來,任何關閉對話框的方法都會失敗苔货,包括vex.close()
和vex.closeAll()
犀概。
那么如何讓對話框關閉呢?
聰明的你一定猜到了夜惭,把beforeClose
的返回值設置為true
即可姻灶!下面就行我們要做的:
vexInstance.options.beforeClose = function(){
return true
}
其中vexInstance
就是vex對話框的實例,可以在初始化的時候保存在一個變量里滥嘴,也可以用vex.getById()
或vex.getAll()
方法獲得木蹬。
參考:vex官方文檔