uniapp自定义弹窗组件

介绍
uniapp自定义弹窗组件uniPop，基于uni-app开发的自定义模态弹窗|msg信息框|alert对话框|confirm确认框|toast弱提示框

支持多种动画效果、多弹窗类型ios/android、可以自定义弹窗样式/自定义多按钮及事件/弹窗显示位置、自动关闭秒数、遮罩层透明度及点击遮罩是否关闭

H5/小程序/App三端效果如下，亲测多端效果兼容性一致。(后续大图均展示App端)

用法
◆ 弹窗uniPop.vue组件两种引入方式

1、在main.js里引入全局组件

import uniPop from './components/uniPop/uniPop.vue'

Vue.component('uni-pop', uniPop) 

2、在相应页面引入组件

复制代码

import uniPop from './components/uniPop/uniPop.vue'
export default {
    data() {
        return {
            ...
        }
    },
    components:{
        uniPop
    },
    ...
}

msg信息框效果

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

this.$refs.uniPop.show({
    skin: 'toast',
    content: 'loading',
    icon: 'loading', //success | info | error | loading
    shade: false,
    time: 3
})

let uniPop = this.$refs.uniPop
uniPop.show({
    skin: 'ios',
    title: '开启新邮件提醒',
    content: '为了保证新邮件能及时收到提醒，请前往系统 [设置] - [电池] 中关闭应用锁屏清理。',
    shadeClose: false,
    
    btns: [
        {
            text: '取消',
            style: 'color: #2a83f2',
            onTap() {
                uniPop.close();
            }
        },
        {
            text: '前往设置',
            style: 'color: #2a83f2',
            onTap() {
                console.log('您点击了前往设置！');
            }
        }
    ]
})

调用方式如上，只是传入参数不一样，下面就不一 一展示了

◆ uniapp自定义模板template

 /**
  * @tpl        uni-app自定义弹窗组件 - uniPop.vue
  * @author     andy by 2019-09-20
  * @about      Q：282310962  wx：xy190310
  */

◆ 默认参数配置

data() {
    return {
        defaultOptions: {
            isVisible: false,       //是否显示弹窗
            
            title: '',              //标题
            content: '',            //内容
            contentStyle: '',       //内容样式
            style: null,            //自定义弹窗样式
            skin: '',               //弹窗风格
            icon: '',               //弹窗图标
            xclose: false,          //自定义关闭按钮
            
            shade: true,            //遮罩层
            shadeClose: true,       //点击遮罩关闭
            opacity: '',            //遮罩透明度
            time: 0,                //自动关闭秒数
            end: null,              //销毁弹窗回调函数
            
            anim: 'scaleIn',        //弹窗动画  scaleIn(默认) | fadeIn | shake | top | right | bottom | left
            position: '',           //弹窗位置  top | right | bottom | left
            
            btns: null,             //弹窗按钮
        },
        opts: {},
        timer: null
    }
},

◆ 通过Object.assign函数进行参数合并处理

methods: {
    // 显示弹窗事件（处理传参）
    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)
        }
    },
    ...
}

好了，uni-app自定义弹窗组件介绍就到这里，希望能喜欢~~