uniapp中封装一个弹框组件

最新推荐文章于 2024-08-06 17:07:01 发布

原创最新推荐文章于 2024-08-06 17:07:01 发布 · 2.6k 阅读

11 ·

CC 4.0 BY-SA版权

uniapp 专栏收录该内容

11 篇文章

订阅专栏

本文展示了如何在Vue中创建一个名为Popup的组件，用于显示带有标题、内容、取消和确认按钮的弹框。Popup组件通过props接收数据，并通过$emit触发自定义事件来与父组件交互。在父组件中，当点击按钮时，Popup组件会被展示，点击取消或确认按钮会触发相应的回调函数并关闭弹框。

1，准备组件popup

// components文件夹中popup组件
<template>
	<view>
		<view class="show-box-bg wx-login-box">
			<view class="conten">
				<view class="titl">{{ popupMsg.title }}</view>
				<view class="text">{{ popupMsg.content }}</view>
				<view class="btn-box">
					<view class="cancel" @click='hidePopup("no")'>{{ popupMsg.cancel }}</view>
					<view class="confirm" @click='hidePopup("yes")'>{{ popupMsg.confirm }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		//(1)子组件中，通过props接收到数据
		props: ['popupMsg'],
		data() {
			return {
				
			}
		},
		methods: {
			hidePopup:function(type) {
			    //子组件中，使用$emit调用父组件自定义事件，还可以传参
				this.$emit('handlePopup', type)
			},
		}
	}
</script>

<style scoped lang="scss">
	.wx-login-box {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 88;

		.conten {
			width: 78%;
			background-color: #fff;
			z-index: 99;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			border-radius: 14upx;
			overflow: hidden;

			.titl {
				width: 90%;
				height: 110rpx;
				font-size: 40rpx;
				padding: 0 5%;
				line-height: 140rpx;
			}

			.text {
				width: 90%;
				font-size: 28rpx;
				padding: 0 5%;
				margin-bottom: 40rpx;
			}

			.memberY {
				width: 90%;
				font-size: 28rpx;
				color: #FFCC00;
				padding: 0 5%;
				text-align: center;
			}

			.memberB {
				width: 90%;
				font-size: 28rpx;
				color: #007AFF;
				padding: 0 5%;
				text-align: center;
			}

			.btn-box {
				width: 100%;
				height: 90rpx;
				display: flex;
				border-top: 2rpx solid #969696;

				.cancel {
					width: 50%;
					height: 100%;
					font-size: 40rpx;
					color: #999;
					text-align: center;
					line-height: 89rpx;
					border-right: 2rpx solid #969696;
				}

				.confirm {
					width: 50%;
					height: 100%;
					font-size: 40rpx;
					color: #ffcc00;
					text-align: center;
					line-height: 99rpx;
				}
			}
		}

	}
</style>

2，使用组件

// An highlighted block
<template>
	<view class="content">
		<button type='primary' @click='showPopup=true'>点击弹框</button>
		<!-- (3)使用 -->
		<popup 
		:popupMsg = "popupMsg" 
		@handlePopup='handleShowOrHidePopup'
		v-show="showPopup"/>
	</view>
</template>

<script>
   //(1)引入
	import popup from '@/components/popup.vue';
	export default {
	//(2)挂载
		components: {popup},
		data() {
			return {
				showPopup:false,
				popupMsg:{
					title:'这是标题',
					content:'这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容',
					cancel:'取消',
					confirm:'确定'
				},
				hotgoods:[
					{id:'01',title:'标题一'},
					{id:'02',title:'标题二'},
				],
			}
		},
		methods: {
			handleShowOrHidePopup:function(type){
				if(type=='yes'){
					console.log(type)
					this.showPopup = false
				}else{
					console.log(type)
					this.showPopup = false
				}
			},
		}	
	}
</script>