uni-app自定义弹窗模板uniPop组件

uni-app自定义弹窗uniPop.vue模板|uniapp仿微信弹窗/仿ios弹窗效果|msg信息框|alert对话框|loading提示框

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

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

引入

以下两种方式均可引入uniPop弹窗组件:

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>

alert对话框效果

let uniPop = this.$refs.uniPop
uniPop.show({
	title: '提示',
	content: '询问框 (弹窗内容,用于告知当前状态、提示信息和解决方法,描述文字/文案尽量控制在三行内)',
	shadeClose: false,
	anim: 'fadeIn',
	
	btns: [
		{
			text: '取消',
			onTap() {
				console.log('您点击了取消!');
				uniPop.close();
			}
		},
		{
			text: '确定',
			style: 'color: #41a863',
			onTap() {
				console.log('您点击了确定!');
			}
		}
	]
})

Toast加载层效果 - 支持loading/success/info/error四种图标

this.$refs.uniPop.show({
    skin: 'toast',
    content: 'loading',
    icon: 'loading', //success | info | error | loading
    shade: false,
    time: 3
})
/**
  * @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
    }
},
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)
        }
    },
    ...
}

好了,今天的uniapp弹窗组件分享就到这里,希望能喜欢😀😀~~

◆ 最后附上uniApp自定义导航实现

uniapp自定义顶部导航栏:https://cloud.tencent.com/developer/article/1508009

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券