基于uni-app自定义模态对话框uniPop实例分享|仿微信/ios弹出框效果

uniapp自定义Modal弹窗uniPop.vue组件|toast提示|alert对话框

如下图：H5/小程序/App端效果展示。(后面大图均是App端)

基于uni-app开发的自定义模态弹窗，弥补了原生弹窗居多限制，uniPop内置多种动画效果、可选择皮肤ios/android、并且可以自定义弹窗样式/自定义多按钮及事件/弹窗显示位置、自动关闭秒数、遮罩层透明度及点击遮罩是否关闭

组件调用方式
uniPop.vue支持以下两种引入方式：

• 在main.js里引入全局组件
  import uniPop from './components/uniPop/uniPop.vue'
  Vue.component('uni-pop', uniPop)
• 在页面引入组件

通过以下方式调用即可 this.$refs.uniPop.show({...})

this.$refs.uniPop.show({
    content: 'msg消息提示框（5s后窗口关闭）',
    shade: true,
    shadeClose: false,
    time: 5,
    anim: 'fadeIn',
})

uniPop自定义模板

配置参数如下

show(args) {
    this.opts = Object.assign({}, this.defaultOptions, args, {isVisible: true})
    // console.log(this.opts)
    
    // 自动关闭
    if(this.opts.time) {
 this.timer = setTimeout(() => {
     this.close()
 }, this.opts.time * 1000)
    }
},