介绍
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     },     ... }

<template>     <view class="container">         ...                  <!-- 弹窗模板 -->         <uni-pop ref="uniPop"></uni-pop>     </view> </template>

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   */  <template>     <view v-if="opts.isVisible" class="uniPop" :class="opts.isCloseCls">         <view class="unipop__ui_panel">             <view v-if="opts.shade" class="unipop__ui_mask" @tap="shadeTaped"></view>             <view class="unipop__ui_main">                 <view class="unipop__ui_child" :style="opts.style">                     <!-- 标题 -->                     <view v-if="opts.title" class="unipop__ui_tit">{{opts.title}}</view>                     <!-- 内容 -->                     <view v-if="opts.content" class="unipop__ui_cnt" :style="opts.contentStyle">                         {{opts.content}}                     </view>                     <view v-if="opts.btns" class="unipop__ui_btns">                         <text v-for="(item,index) in opts.btns" :key="index" class="btn" :style="item.style" @tap="btnTaped(item)">{{item.text}}</text>                     </view>                 </view>                 <!-- xclose -->                 <view v-if="opts.xclose" class="unipop__xclose" @tap="close"></view>             </view>         </view>     </view> </template>

◆ 默认参数配置

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自定义弹窗组件介绍就到这里，希望能喜欢????????~~