> 一个聚合了有赞Vant及京东NutUI组件库中的Popup弹层、Dialog对话框、Notify通知信息、Toast加载框、ActionSheet底部弹出框等功能的轻量级弹窗组件。
如下图：在Nuxt.js项目中的实例应用场景。
在main.js中引入组件
import Popup from './components/popup'
Vue.use(Popup)
组件提供了标签式及函数式两种调用方式。
- 标签式使用
...
- 函数式使用
大家可以根据实际项目需求，任意搭配使用方式，让你想要的效果均可实现。
提供如下丰富的参数配置，随意组合出想要的效果。
是不是觉得这种参数很眼熟，没错，就是有名的Dialog及Layer弹窗常用的配置参数。
@@Props
------------------------------------------
v-model 当前组件是否显示
title标题
content 内容（支持自定义插槽内容）
type 弹窗类型（toast | footer | actionsheet | actionsheetPicker | android/ios）
popupStyle 自定义弹窗样式
icon toast图标（loading | success | fail）
shade是否显示遮罩层
shadeClose 是否点击遮罩时关闭弹窗
opacity 遮罩层透明度
round是否显示圆角
xclose 是否显示关闭图标
xposition 关闭图标位置（left | right | top | bottom）
xcolor 关闭图标颜色
anim 弹窗动画（scaleIn | fadeIn | footer | fadeInUp | fadeInDown）
position 弹出位置（top | right | bottom | left）
follow 长按/右键弹窗（坐标点）
time 弹窗自动关闭秒数（1、2、3）
zIndex 弹窗层叠（默认8080）
btns 弹窗按钮（参数：text|style|disabled|click）
@@$emit
------------------------------------------
open 打开弹出层时触发（@open="xxx"）
close关闭弹出层时触发（@close="xxx"）
@@Event
------------------------------------------
onOpen 打开弹窗回调
onClose 关闭弹窗回调
弹窗模板
class="btn">
class="nuxt__xclose">
另外组件还支持 右键弹窗/长按弹窗 及 自定义插槽 内容。让你的弹窗实现千变万化的效果。
自定义插槽内容！
自定义插槽内容！
以上两种方法均可以实现自定义插槽内容。
当 content 和 自定义插槽 内容同时存在，只显示插槽内容！！！
okey，基于Vue/Nuxt自定义弹出框组件就分享到这里。希望对大家有所帮助哈！
另外VPopup组件正在NuxtJs项目中实例应用，后续也会分享出来。
> 作者：xiaoyan2017
链接： https://www.cnblogs.com/xiaoyan2017/p/13776977.html
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
