为了账号安全,请及时绑定邮箱和手机立即绑定

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

2019.10.01 08:40 1374浏览

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)
  • 在页面引入组件
<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({...})

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

图片描述
图片描述
图片描述
图片描述
图片描述
图片描述
图片描述
图片描述
图片描述
图片描述
图片描述
图片描述

uniPop自定义模板

/**
  * @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>

配置参数如下

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)
    }
},
点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消