uniapp自定义弹窗组件Modal模态框Loading加载框

uni-app 自定义 Modal 模态弹窗模板 uniPop，uniapp 仿微信、android、ios 弹窗效果

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

如上图：H5/ 小程序 /App 三端效果兼容性一致。(后续大图均展示 App 端)

引入方式

uniPop.vue 弹窗组件两种引入方式：

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

2、在页面引入组件

<template>
    <view class="container">
        ...
        
        <!-- 弹窗模板 -->
        <uni-pop ref="uniPop"></uni-pop>
    </view>
</template>
 
<script>
    import uniPop from './components/uniPop/uniPop.vue'
    export default {data() {
            return {...}
        },
        components:{uniPop},
        ...
    }
</script>

下面展示几种弹窗类型及调用方式
msg 信息框效果

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

ios 底部对话框效果

let uniPop = this.$refs.uniPop
uniPop.show({
    skin: 'footer',
    content: '<div> 查看 TA 的主页 <br/> 282310962@qq.com</div>',
    shadeClose: false,
    anim: 'bottom',
    
    btns: [
        {
            text: '关注',
            style: 'color: #41a863',
            onTap() {console.log('您点击了关注！');
            }
        },
        {text: '加入黑名单'},
        {
            text: '删除',
            // style: {color: '#e63d23'},
            style: 'color: #ff4350',
            onTap() {console.log('您点击了删除！');
                
                // 删除回调提示
                uniPop.show({
                    anim: 'fadeIn',
                    content: '您点击了删除功能',
                    shade: true,
                    time: 3
                });
            }
        },
        {
            text: '取消',
            style: 'color: #999',
            onTap() {console.log('您点击了取消！');
                uniPop.close();}
        }
    ]
})

Toast 弱提示效果（支持 success/info/error/loading 四种图标）

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

uniPop 自定义组件模板 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
    }
},

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)
    }
},

以上就是 uniApp 自定义组件弹窗介绍，希望能喜欢????????~~

◆ 附上 uniapp 自定义顶部导航栏及底部 tabBar 组件
uniapp 自定义导航栏：https://blog.csdn.net/yanxiny…
uniapp 自定义 tabbar：https://blog.csdn.net/yanxiny…