uni-app 自定义 Alert 对话框组件 uniPop 实例分享

今天给大家分享一个基于 uni-app 开发的自定义弹窗|msg 信息框|toast 提示，功能效果类似微信弹窗及 ios 弹窗效果

uniPop 可以自定义弹窗内容及样式、支持富文本显示，可以自定义多按钮及事件 /弹窗显示位置、自动关闭秒数、遮罩层透明度及点击遮罩是否关闭，另外支持 android、ios 弹窗形式。

不多说，上图，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>

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

自定义模板 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>

作者：xiaoyan2015
链接： https://cloud.tencent.com/developer/column/3374
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。