uniapp---弹出框（弹窗）组件（有取消，确定按钮）代码

uniapp—弹出框组件（弹窗）组件（有取消，确定按钮）代码

popUptips.vue

<template>
	<view class="">
		<!-- 弹出框 -->
		<view class="masks" @click="colseBtn" v-if="isSHow"></view>
		<view class="kuangs paddingA40 marR40 marL40 boxSize " v-if="isSHow">
			<image class="iconSize30 floatR" src="/static/images/close1.png" mode="" @click="colseBtn"></image>
			<view class="FontCenter fontSize16 fontWei marB60 marT60 widP100">
				<view class="marB40">
					{{zdTit}}
				</view>
				{{zdTxt}}
			</view>
			<view class="display widP100 marT80">
				<view class="kuangbtn" @click="colseBtn">
					取消
				</view>
				<view class="kuangbtn kuangbtn1" @click="zdBtn">
					确定
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputVal: '',
				searTxt: '搜索',
			}
		},
		props: {
			// 组件输入值
			zdTit: {
				type: [String],
				default: '提示文字'
			},
			zdTxt: {
				type: [String],
				default: '提示内容'
			},
			isSHow:{
				type: [Boolean],
				default: false
			}
			
	
		},
		methods: {
			//点击取消按钮
			colseBtn() {
				this.$emit("colseBtn" )
			},
			
			//点击确定按钮
			zdBtn() {
				this.$emit("zdBtn")
			}
		},
		computed: {
			// 子组件中更改绑定的prop值最好使用计算属性computed解决
		},
		watch: {
			// father(){
			//   this.son = "儿子"
			// }
		},
	}
</script>

<style>
.masks {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #2F2F2F;
		opacity: 0.8;
		z-index: 99;
	}

	.kuangs {
		width: 90%;
		border-radius: 20rpx;
		background-color: rgba(255, 255, 255, 100);
		position: fixed;
		top: 30%;
		z-index: 999;
	}

	.kuangbtn {
		width: 316rpx;
		height: 92rpx;
		line-height: 92rpx;
		border-radius: 60rpx 0px 0px 60rpx;
		background-color: rgba(246, 247, 251, 100);
		color: rgba(47, 47, 47, 100);
		font-size: 14px;
		text-align: center;
		border: 1px solid rgba(47, 47, 47, 100);
	}

	.kuangbtn1 {
		border-radius: 0px 60rpx 60rpx 0px;
		background-color: rgba(47, 47, 47, 100);
		color: #fff;
	}
	.paddingA40 {
		padding: 40rpx;
	}
	.marR40 {
		margin-bottom: 40rpx;
	}
	.marL40 {
		margin-left: 40rpx;
	}
	.boxSize {
		box-sizing: border-box;
	}
	.marB40 {
		margin-bottom: 40rpx;
	}
	.FontCenter {
		text-align: center;
	}
	
	.fontSize16 {
		font-size: 32rpx;
	}
	.fontBold {
		font-weight: bold;
	}
	.marB60 {
		margin-bottom: 60rpx;
	}
	.marT60 {
		margin-top: 60rpx;
	}
	.widP100 {
		width: 100%;
	}
	.marT80 {
		margin-top: 80rpx;
	}
	.iconSize30 {
		width: 62rpx;
		height: 62rpx;
	}
	.floatR {
		float: right;
	}
	.display {
		display: flex;
	}
	.fontWei {
		font-weight: bold;
	}
</style>

调用组件

<!-- 弹出框 -->
<popUptips zdTit='确认取消' :zdTxt='zdTxt' :isSHow='isSHow' @colseBtn='colseBtn' @zdBtn="zdBtn"></popUptips>


<script>
	export default {
		data() {
			return {
				zdTxt: '',
				isSHow: false,
			},
		},
		methods:{
			// 关闭弹出框
			colseBtn() {
				this.isSHow = false;
			},
			// 点击确定按钮
			zdBtn() {
				this.$myRequest('cancelPtClassOrder', 'POST', {
						uid: this.uid,
						gid: this.gid,
						oid: this.oid,
						ptid: this.ptid,
					})
					.then(v => {
						this.$alert(v.data);
						this.ptGetMemberPt();
						this.colseBtn();
					})
			},

		}
	}
</script>