缘由

国庆假期正是给自己充充电的好时机。就一直捣鼓NuxtJs项目开发，由于项目中有很多地方需要用到弹框功能，鉴于网上的一些组件库恐不能满足需求或定制性不高，于是决定自己造一个Vue移动端弹窗组件VPopup。

介绍

vpopup 基于Vue.js构建的移动端对话框组件。汇聚了 Popup 弹出层、Notify 通知信息、Dialog 对话框、ActionSheet 动作面板框及 Toast 弱提示框 等功能。

用法

在main.js中引入组件。

import Popup from './components/popup'

Vue.use(Popup)

vpopup组件支持标签式和函数式两种调用方式。

• 标签式使用

• 函数式使用

至于使用哪一种调用方式，这个得根据项目需求自行选择即可。

• msg信息框
  

• Toast轻提示框
  

• android/ios弹窗效果

• ActionSheet底部面板框

参数配置

组件支持如下参数配置，根据项目需求自行组合实现想要的效果。

弹窗模板

组件还支持右键弹窗/长按弹窗及自定义插槽内容。

❤️ 最后

ok，基于Vue/Nuxt自定义全局弹框组件就分享到这里。希望对大家有所帮助！

目前该组件已经在Nuxt.js项目中有实践应用，届时也会分享出来。