緣由

國(guó)慶假期正是給自己充充電的好時(shí)機(jī)。就一直搗鼓NuxtJs項(xiàng)目開(kāi)發(fā)，由于項(xiàng)目中有很多地方需要用到彈框功能，鑒于網(wǎng)上的一些組件庫(kù)恐不能滿足需求或定制性不高，于是決定自己造一個(gè)Vue移動(dòng)端彈窗組件VPopup。

介紹

vpopup 基于Vue.js構(gòu)建的移動(dòng)端對(duì)話框組件。匯聚了?Popup 彈出層、Notify 通知信息、Dialog 對(duì)話框、ActionSheet 動(dòng)作面板框及 Toast 弱提示框?等功能。

用法

在main.js中引入組件。

import Popup from './components/popup'

Vue.use(Popup)

vpopup組件支持標(biāo)簽式和函數(shù)式兩種調(diào)用方式。

• 標(biāo)簽式使用

• 函數(shù)式使用

至于使用哪一種調(diào)用方式，這個(gè)得根據(jù)項(xiàng)目需求自行選擇即可。

• msg信息框
  

• Toast輕提示框
  

• android/ios彈窗效果

• ActionSheet底部面板框

參數(shù)配置

組件支持如下參數(shù)配置，根據(jù)項(xiàng)目需求自行組合實(shí)現(xiàn)想要的效果。

彈窗模板

組件還支持右鍵彈窗/長(zhǎng)按彈窗及自定義插槽內(nèi)容。

?? 最后

ok，基于Vue/Nuxt自定義全局彈框組件就分享到這里。希望對(duì)大家有所幫助！

目前該組件已經(jīng)在Nuxt.js項(xiàng)目中有實(shí)踐應(yīng)用，屆時(shí)也會(huì)分享出來(lái)。