uniapp 自定义popup 弹窗 简单封装(微信小程序)

原创 已于 2025-01-24 10:09:16 修改 · 1.4k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app #微信小程序 #小程序 #uniapp #前端

于 2024-11-22 15:15:57 首次发布

效果并不完整，有需求可以自行修改

适用于vue2   弹窗只支持居中弹出和下方弹出，内容可以自定义

效果图

子组件 

代码

新建组件文件夹  zPopup  

<template>
	<view class="zPopup_show" v-if="style_show"
		:class="mode=='center'?(show?'zPopup_show_center openAnimation':'zPopup_show_center closeAnimation'):mode=='bottom'?(show?'zPopup_show_bottom  openAnimation':'zPopup_show_bottom  closeAnimation'):''"
		@tap.stop="maskClose?colosePopue():()=>{}">
		<view class="zSlotViews"
			:class="mode=='bottom'?(show?'zSlotViews_bottom_open  ':'zSlotViews_bottom_close  '):''" @tap.stop="()=>{}">
			<view class="zSlotView">
				<image class="colseIcon" src="" mode="aspectFit" @tap.stop="colosePopue"></image>
				<!-- 插槽内容可以自定义 -->
				<slot name="center"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "zPopup",
		//show  主要控制动画效果
		//mode   设置方向弹出
		// maskClose  是否可以通过 点击遮罩层来关闭 弹窗
		props: ['show', 'mode', 'maskClose'],
		//style_show   控制显示不显示
		data() {
			return {
				style_show: null //控制显示不显示
			};
		},
		onLoad() {

		},
		onShow() {

		},
		watch: {
			show: {
				handler(newName, oldName) {
					// console.log(newName, '新值');
					// console.log(oldName, '老值');
					//为true是开启动画，动画效果不用延迟出现
					//为false是关闭动画，动画效果先关闭 再进行整个弹窗的关闭，不会出现回显数据消失
					if (newName) {
						this.style_show = newName;
					} else {
						setTimeout(() => {
							this.style_show = newName;
						}, 300)
					}
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			//关闭弹窗
			colosePopue() {
				if (!this.style_show) {
					return
				}
				this.$emit('closeCar')
			}
		}
	}
</script>

<style lang="scss" scoped>
	//居中显示
	.zPopup_show_center {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999999999;
		background: rgba(0, 0, 0, 0.6);
		display: flex;
		justify-content: center;
		align-items: center;
		opacity: 1;
		border-radius: 0rpx !important;
	}

	.openAnimation {
		animation: slow_show 0.22s linear;
	}

	.closeAnimation {
		opacity: 0 !important;
		animation: close_slow_show 0.22s linear;
	}

	@keyframes slow_show {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes close_slow_show {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	//从下方弹出显示
	.zPopup_show_bottom {
		width: 100vw;
		height: 100vh;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999999999;
		background: rgba(0, 0, 0, 0.6);
		display: flex;
		justify-content: center;
		align-items: flex-end;
		opacity: 1;
		border-radius: 18rpx;

		.zSlotViews {
			width: 100% !important;
			position: relative;
			bottom: 0;
			left: 0;
			// padding: 30rpx 50rpx !important;
		}

		.zSlotViews_bottom_open {
			animation: From_bottom_to_top 0.22s linear;
		}

		.zSlotViews_bottom_close {
			animation: From_top_to_bottom 0.3s linear;
		}
	}


	@keyframes From_bottom_to_top {
		0% {
			bottom: -100%;
		}

		100% {
			bottom: 0;
		}
	}

	@keyframes From_top_to_bottom {
		0% {
			bottom: 0;
		}

		100% {
			bottom: -100%;
		}
	}


	.zSlotViews {
		width: 100vw !important;
		box-sizing: border-box;
		// background: #fff;




		.zSlotView {
			// background: #FFFFFF;
			width: 100vw;
			border-radius: 12rpx;
			position: relative;
			z-index: 10074;
			display: flex;
			justify-content: center;
			align-items: center;

			.colseIcon {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				right: 30rpx;
				top: 30rpx;
				background: lightcoral;
			}

		}

	}
</style>

全局使用 挂载

//挂载悬浮窗
import zPopup from '@/components/zPopup/zPopup.vue'
Vue.component('zPopup ', zPopup )

单独使用

import zPopup from "@/components/zPopup /zPopup .vue"
components: {
			zPopup
		},

父组件使用

<template>
	<view>
		<view class="">
			<zPopup :show="show" :mode="'center'" @closeCar="closeCar">
				<!-- 插槽可自定义内容 -->
				<template v-slot:center>
					<view style="width: 100%;height: 500rpx;background: #fff;border-radius: 40rpx;"></view>
				</template>
			</zPopup>
		</view>
		<view class="" @tap="open()">
			打开
		</view>
	</view>
</template>

js

<script>
	import zPopup from "@/components/zPopup /zPopup .vue"
	export default {
		data() {
			return {
				show: false,
			};
		},
		components: {
			zPopup
		},
		methods: {
            //打开弹窗
			open() {
				//做一些数据回显的话优先调接口，再显示弹窗
				setTimeout(() => {
					this.show = true;
				}, 200)
			},
			//关闭弹窗
			closeCar() {
				this.show = false;
			},
		}
	}
</script>

v3写法

子组件

<template>

	<view class="zPopup_show" v-if="Data.style_show"
		:class="mode=='center'?(show?'zPopup_show_center openAnimation':'zPopup_show_center closeAnimation'):mode=='bottom'?(show?'zPopup_show_bottom  openAnimation':'zPopup_show_bottom  closeAnimation'):''"
		@tap.stop="maskClose?colosePopue():()=>{}">
		<view class="zSlotViews"
			:class="mode=='bottom'?(show?'zSlotViews_bottom_open  ':'zSlotViews_bottom_close  '):''" @tap.stop="()=>{}">
			<view class="zSlotView">
				<image class="colseIcon" src="" mode="aspectFit" @tap.stop="colosePopue"></image>
				<!-- 插槽内容可以自定义 -->
				<slot name="center"></slot>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		defineProps,
		reactive,
		watch,
		defineEmits
	} from "vue";
	const props = defineProps({
		show: {
			default: false,
			type: Boolean
		},
		mode: {
			default: 'center',
			type: String
		},
		maskClose: {
			default: false,
			type: Boolean
		}
	});
	
	const Emits=defineEmits(['closeCar'])

	const Data = reactive({
		style_show: null //控制显示不显示
	})

	watch(() => props.show, (newv, oldv) => {
		console.log(newv, '新值');
		console.log(oldv, '老值');
		
		if (newv) {
			Data.style_show = newv;
		} else {
			setTimeout(() => {
				Data.style_show = newv;
			}, 300)
		}

	}, {
		deep: true
	})
	
	const colosePopue = () => {
		if (!Data.style_show) {
			return
		}
		Emits('closeCar')
	}

</script>

<style lang="scss" scoped>
	//居中显示
	.zPopup_show_center {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999999999;
		background: rgba(0, 0, 0, 0.6);
		display: flex;
		justify-content: center;
		align-items: center;
		opacity: 1;
		border-radius: 0rpx !important;
	}

	.openAnimation {
		animation: slow_show 0.22s linear;
	}

	.closeAnimation {
		opacity: 0 !important;
		animation: close_slow_show 0.22s linear;
	}

	@keyframes slow_show {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes close_slow_show {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	//从下方弹出显示
	.zPopup_show_bottom {
		width: 100vw;
		height: 100vh;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999999999;
		background: rgba(0, 0, 0, 0.6);
		display: flex;
		justify-content: center;
		align-items: flex-end;
		opacity: 1;
		border-radius: 18rpx;

		.zSlotViews {
			width: 100% !important;
			position: relative;
			bottom: 0;
			left: 0;
			// padding: 30rpx 50rpx !important;
		}

		.zSlotViews_bottom_open {
			animation: From_bottom_to_top 0.22s linear;
		}

		.zSlotViews_bottom_close {
			animation: From_top_to_bottom 0.3s linear;
		}
	}


	@keyframes From_bottom_to_top {
		0% {
			bottom: -100%;
		}

		100% {
			bottom: 0;
		}
	}

	@keyframes From_top_to_bottom {
		0% {
			bottom: 0;
		}

		100% {
			bottom: -100%;
		}
	}


	.zSlotViews {
		width: 100vw !important;
		box-sizing: border-box;
		// background: #fff;

		.zSlotView {
			// background: #FFFFFF;
			width: 100vw;
			border-radius: 12rpx;
			position: relative;
			z-index: 10074;
			display: flex;
			justify-content: center;
			align-items: center;

			.colseIcon {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				right: 30rpx;
				top: 30rpx;
				background: lightcoral;
			}

		}

	}
</style>

父组件

<template>
	<view class="content">
		<template>
			<view>
				<view class="">
					<zPopup :show="Data.show" :mode="'center'" @closeCar="closeCar">
						<!-- 插槽可自定义内容 -->
						<template v-slot:center>
							<view style="width: 100%;height: 500rpx;background: #fff;border-radius: 40rpx;"></view>
						</template>
					</zPopup>
				</view>
				<view class="" @tap="open()">
					打开
				</view>
			</view>
		</template>
	</view>
</template>

<script setup>
	import zPopup from "@/components/zPopup/zPopup.vue"
	import {
		defineProps,
		reactive,
		watch
	} from "vue";
	const Data = reactive({
		show: false //控制显示不显示
	})

	const open = () => {
		//做一些数据回显的话优先调接口，再显示弹窗
		console.log('触发了')
		setTimeout(() => {
			Data.show = true;
		}, 200)
	}


	const closeCar = () => {
		Data.show = false;
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

Uniapp 自定义弹窗
蒯厅博客
05-12 1317
Uniapp 自定义弹窗。
uni-app自定义Modal弹窗组件|仿ios、微信弹窗效果
maoge_666的博客
06-03 2359
uni-app自定义Modal弹窗组件|仿ios、微信弹窗效果
uni-popup弹窗使用案例
hj1043的博客
06-25 285
本文介绍了在uniapp项目中使用uni-popup组件实现收费弹窗功能的开发过程。主要内容包括：1) 通过ref绑定弹窗组件，使用open/close方法控制显示；2) 实现金额选择功能（预设金额+自定义输入），并对输入进行两位小数校验；3) 完成收费数据提交与状态更新逻辑，包括前端状态同步和后端数据更新；4) 提供了完整的代码示例，涵盖模板结构、脚本逻辑和样式设计；5) 强调了开发中的关键点，如组件使用方法、输入校验和状态管理。该实现适用于需要弹窗交互的业务场景，具有较好的参考价值。
uni-app APP端map组件 marker自定义弹框组
最新发布
weixin_45358633的博客
07-29 205
本文介绍了在uni-app中使用renderjs解决地图组件在APP端适配问题的方案。通过自定义地图弹框组件，作者发现uni-app的map组件在H5正常但在APP端存在问题。采用renderjs技术实现高德地图集成，包括地图初始化、标记点添加和点击事件处理。关键代码展示了如何通过动态加载高德地图API、创建地图实例、管理标记点列表，并与uni-app组件交互。方案实现了定位功能、标记点显示和点击弹窗效果，有效解决了跨平台适配问题，为uni-app地图开发提供了参考方案。
uniapp 封装弹窗组件（popup ，可以修改弹窗按钮名，显示内容）
lanbaiyans的博客
04-27 4599
项目中使用了多个弹窗，且内容不一样，于是重新进行封装（避免后期样式大改）其中：图片，文字 按钮名 功能 都可以自定义（父子相互传值）注意:按钮可以不传 默认是 “确认”,"取消"
uniapp微信小程序自定义弹窗组件
weixin_64218480的博客
08-23 3914
自定义弹窗封装
uniapp 封装弹窗组件（popup ，单选按钮，可以自选表单并提交表单）附有完整代码
lanbaiyans的博客
05-08 6114
uniapp 封装弹窗组件（popup ，单选按钮，可以自选表单并提交表单）附有完整代码
uniapp uni-popup组件在微信小程序中滚动穿透问题
lauwen
12-01 2799
在微信小程序中使用uni-popup组件时，出现滚动穿透，并且uni-popup内部内容不会滚动问题。
微信小程序vant弹窗组件的实现方式
10-15
通过以上介绍，我们可以看到，Vant Weapp 的弹窗组件为微信小程序的开发提供了强大且易用的工具，无论是简单的信息提示还是复杂的用户交互，都可以轻松应对。在实际项目中，结合具体的业务需求，灵活运用这些组件，...
UniApp组件与微信小程序组件对照学习
行思理的博客
09-26 2424
UniApp只是一个第三方的开发工具，借鉴各种平台的能力，UniApp的组件也借鉴了微信小程序的组件，我们学习时，可以进行对照学习，我们在用UniApp开发微信小程序时，UniApp也只是将代码转成了微信小程序的代码，还是需要了解微信小程序开发，才能开发出微信小程序的。
【小程序开发】—— 封装自定义弹窗组件
小陈的博客
12-23 719
首先我们需要探讨一下，封装自定义的组件都需要什么功能1.需要一个半透明灰色的背景，用于区分与非弹窗内容，点击灰色区域也可以关闭弹窗。2.需要一个关闭按钮和两个操作按钮，一个确定，一个取消。3.弹窗内容：标题，内容区域，因为是自定义所以都使用了具名插槽，也可以设置默认的显示内容。4.弹窗的显示位置，本次封装只考虑了居中与页面底部两个常用显示位置。为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
uni-app自定义弹窗组件，支持自定义图片，文本、按钮等功能。
04-17
uni-app自定义弹窗组件，支持自定义图片，文本、按钮等功能。
移动端分享弹窗－ｕｎｉａｐｐ
weixin_67160091的博客
02-21 734
点击分享按钮底部弹出ｐｏｐｕｐ，目前需求只有分享到微信聊天、微信朋友圈、复制链接、删除、举报 贴代码
uniapp自定义封装的弹窗组件
hcy5201314521的博客
12-15 689
props: {message: {
uni-app编写微信小程序使用uni-popup搭配uni-popup-dialog组件在ios自动弹出键盘。
码农键盘上的梦
01-14 1022
就在于不要使用默认的输入，要借用默认插槽进行覆盖。，并引入对应组件即可使用对话框 ，自定义内容，会覆盖原有的内容显示。该组件不支持单独使用。
uni-app自定义弹窗
qq_19688207的博客
11-02 777
【代码】uni-app自定义弹窗。
uniapp App自定义弹窗
Lsir1998的博客
07-27 1716
uniapp app自定义全局弹窗，h5以及微信小程序均可使用
uniapp自定义弹窗
qq_38270571的博客
04-08 5168
uniapp自定义弹窗 基本需求中需要点开卡片，设置卡片中某一列的数量，这里需要打开一个弹窗设置，但是uniapp中默认的弹窗组件中都没有可以提示输入的，我知道插件市场已有了很多组件，但是今天还是分享一下这个自己写自定义弹窗。话不多说，直接看效果。 附上源码 <view> <view> <button @click="showDiv()">出来吧，我的弹窗！</button> </view> <view :hidde
对uniapp弹窗封装
weixin_46002223的博客
11-20 494
1.新建文件wyb-popup在里面创建wyb-popup.vue和iconfont.css。3.iconfont.css代码。
微信小程序弹窗组件封装实践教程
作者针对微信小程序官方文档对于组件介绍不足的问题，分享了自己封装简单弹出框组件的经验。在开发过程中，遇到重复使用的功能，如弹出框，组件化是提高代码复用性和可维护性的关键。文章首先介绍了背景，指出开发者...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值