今天给大家分享一个最新研发的uniapp自定义弹框组件UAPopup。

ua-popup 基于uniapp开发的增强版popup组件。5+弹窗类型、20+自定义参数配置，支持v-model控制、可完美运行于h5+小程序+app端/nvue等页面。

快速引入

在main.js中引入组件。

import UAPopup from './components/ua-popup/index.vue'Vue.component('ua-popup', UAPopup)

自hbuilderx2.5.5起，支持easycom模式。只需将本组件导入项目【只要组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构】，在页面template中即可直接使用，无需再在页面中import和注册components组件。

uaPopup组件支持v-model控制，组件式+函数式两种调用方式。

// 组件式调用<ua-popup v-model="showMsg" anim="fadeIn" content="上善若水,水利万物而不争" shadeClose="false" time="3" /><ua-popup v-model="showConfirm" shadeClose="false" title="标题" xclose z-index="2001"	content="<div style='color:#ff557f;padding:20px 40px;'>一切都将一去杳然，任何人都无法将其捕获。</div>"	:btns="[		{text: '取消', click: hideConfirm},		{text: '确定', style: 'color:#00aa00;', click: handleInfo},	]"/>

// 函数式嵌套调用handleInfo() {    let $ua = this.$refs.uapopup    let $toast = this.$refs.uatoast    $ua.open({        content: '人生漫漫，且行且珍惜',        customStyle: {'background-color': 'rgba(170, 0, 127, 0.6)', 'color': '#fff'},        time: 3,        onClose() {            $ua.open({                type: 'android',                content: '<div style="color:#aa007f">预测未来的最好办法是自己亲手创造未来</div>',                customStyle: {'width': '200px'},                zIndex: 202120,                btns: [                    {                        text: 'close', click() {                            $ua.close()                        }                    },                    {                        text: 'Get一下',                        style: 'color:#00aa00;',                        click() {                            $toast.open({                                type: 'toast',                                icon: 'loading',                                content: '请稍后...',                                opacity: .2,                                time: 2,                                zIndex: 202125,                            })                        }                    }                ]            })        }    })},

另外还支持一些Nvue原生组件页面。如下图：可直接覆盖在video控件上面。

编码实现20+参数配置

uapopup支持如下参数自由配置使用。

props: {    value: { type: Boolean, default: false },    title: String,    content: String,    type: String,    customStyle: { type: Object, default: null },    icon: String,    shade: { type: [Boolean, String], default: true },    shadeClose: { type: [Boolean, String], default: true },    opacity: { type: [Number, String], default: '' },    round: Boolean,    xclose: Boolean,    xposition: { type: String, default: 'right' },    xcolor: { type: String, default: '#333' },    anim: { type: String, default: 'scaleIn' },    position: String,    follow: { type: Array, default: null },    time: { type: [Number, String], default: 0 },    zIndex: { type: [Number, String], default: '202107' },    btns: {        type: Array, default: null    },    // 打开弹框回调    onOpen: { type: Function, default: null },    // 关闭弹框回调    onClose: { type: Function, default: null },},

<template>	<view v-show="opts.visible" class="ua__popup" :class="{'ua__popup-closed': closeAnim}">		<view v-if="opts.shade && opts.shade!='false'" class="uapopup__overlay" @touchstart="handleShadeClick" :style="{'opacity': opts.opacity >= 0 ? opts.opacity : '', 'z-index': oIndex-1}"></view>		<view class="uapopup__wrap" :style="{'z-index': oIndex}">			<view class="uapopup__child" :id="'uapopup-'+uuid" :class="['anim-'+opts.anim, opts.type&&'popui__'+opts.type, opts.round&&'round', opts.position]" :style="[opts.follow&&positionStyle, opts.customStyle]">				<view v-if="opts.title || $slots.title" class="uapopup__title">					<template v-if="$slots.title"><slot name="title" /></template>					<rich-text v-else :nodes="opts.title"></rich-text>				</view>								<image v-if="opts.type=='toast'&&opts.icon" class="toast__icons" :class="['toast__icons-'+opts.icon]" :src="toastIcon[opts.icon]" mode="widthFix"></image>								<view v-if="opts.content || $slots.content" class="uapopup__content">					<template v-if="$slots.content"><slot name="content" /></template>					<rich-text v-else :nodes="opts.content"></rich-text>				</view>				<slot />								<view v-if="opts.btns" class="uapopup__actions">					<rich-text v-for="(btn,index) in opts.btns" :key="index" class="btn" :class="{'disabled': btn.disabled}" :style="btn.style" @click="handleBtnClick($event, index)" :nodes="btn.text"></rich-text>				</view>								<view v-if="opts.xclose" class="uapopup__xclose" :class="opts.xposition" :style="{'color': opts.xcolor}" @click="close"></view>			</view>		</view>	</view></template>

<script>/** * @Desc     uniapp多端自定义弹框组件 * @Time     andy by 2021/7/10 */	let index = 0	export default {		...		data() {			return {				// 混入props参数，处理函数式调用				opts: {					visible: false,				},				toastIcon: {					...				},				closeAnim: false,				oIndex: 202107,				timer: null,				// 长按定位初始化（避免弹框跳动闪烁）				positionStyle: { position: 'absolute', left: '-999px', top: '-999px' },			}		},		watch: {			value(val) {				const type = val ? 'open' : 'close'				this[type]()			}		},		computed: {			uuid() {				return Math.floor(Math.random() * 10000)			},		},		methods: {			// 打开弹框			open(options) {				if(this.opts.visible) return				this.opts = Object.assign({}, this.$props, options)				this.opts.visible = true								// nvue 的各组件在安卓端默认是透明的，如果不设置background-color，可能会导致出现重影的问题				// #ifdef APP-NVUE				if(!this.opts.customStyle['background'] && !this.opts.customStyle['background-color']) {					this.opts.customStyle['background'] = '#fff'				}				// #endif								let _index = ++index				this.oIndex = _index + parseInt(this.opts.zIndex)								// 长按处理				if(this.opts.follow) {					...				}								...			},			// 关闭弹框			close() {				if(!this.opts.visible) return								this.closeAnim = true				setTimeout(() => {					this.opts.visible = false					this.closeAnim = false										this.$emit('input', false)					this.$emit('close')					typeof this.opts.onClose === 'function' && this.opts.onClose()										this.timer && clearTimeout(this.timer)					delete this.timer				}, 200)			},						...						// 获取dom宽高			getDom(id) {				return new Promise((resolve, inject) => {					uni.createSelectorQuery().in(this).select('#uapopup-' + id).fields({						size: true,					}, data => {						resolve(data)					}).exec()				})			},						// 自适应坐标点			getPos(x, y, ow, oh, winW, winH) {				let l = (x + ow) > winW ? x - ow : x;				let t = (y + oh) > winH ? y - oh : y;				return [l, t];			},		}	}</script>

ok, 今天的分享就到这里, 希望对大家有所帮助！