在components文件夹中新建showModal.vue

<template>
	<view>
		<view class="contarer" v-if="showBtn==true">
			<view class="main" :style="{width:width,height:height}" :class="{'loginW':loginW!==''}">
				<view class="mainTitel" v-if="!loginW">{{shouTitle}}</view>
				<view class="mainBox">
					<view class="mainName" :class="{'logintext':loginW!==''}" v-if="!loginW">{{nameGet}}</view>
					<view class="mainLongin" v-else>
						<view class="mainIcBox">
							<view class="mainIcon">
								<view class="mainIcons"></view>
							</view>
						</view>
						<view class="mainLingText" :class="{'logintext':loginW!==''}">{{loginW}}</view>
					</view>
					<view class="mainBtn" v-if="cancelna||confirmna">
						<view class="mainBtnl" @click="cancel" v-if="cancelna">{{cancelna}}</view>
						<view class="mainBtnr" @click="confirm" v-if="confirmna">{{confirmna}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			width: {
				type: String, //弹窗宽度
				// default: '200rpx'
			},
			height: {
				type: String,  //弹窗高度
				// default: '100rpx'
			},
			shouTitle: {
				type: String,
				default: '提示'
			},
			nameGet: {
				type: String
			},
			showBtn: {
				type: Boolean,
				default: false,
			},
			cancelna: { //取消按钮
				type: String
			},
			confirmna: { //确认按钮
				type: String
			},
			loginW: {
				type: String
			}
		},
		data() {
			return {
				// showBtn:true
			}
		},
		methods: {
			cancel() {
				this.$emit('cancel', false)
				this.showBtn = false
			},
			confirm(e) {
				this.$emit('confirm', e || true)
				this.showBtn = false
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.loginW {
		background-color: rgba(0, 0, 0, 0.8) !important;
		color: #fff !important;
	}

	.logintext {
		color: #fff !important;
	}

	.contarer {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.35);
		z-index: 999 !important;
		display: flex;
		align-items: center;
		justify-content: center;

		.main {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx 0;
			max-width: 60%;
			animation: fadeZoom 0.15s linear;

			.mainTitel {
				min-width: 200rpx;
				text-align: center;
				border-bottom: #999 solid 1rpx;
				padding-bottom: 15rpx;
				font-family: 华文细黑;
				font-size: 33rpx;
				font-weight: bold;
			}

			.mainBox {
				padding: 0 30rpx;

				.mainName {
					padding: 20rpx;
					color: #333;
					word-wrap: break-word;
					text-align: center;
				}

				.mainLongin {
					.mainIcBox {
						width: 200rpx;
						height: 200rpx;
						margin: 30rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 50%;
						border: solid 6rpx #aa557f;
						border-top: 4rpx solid transparent;
						border-bottom: 4rpx solid transparent;
						animation: y 4s infinite;

						.mainIcon {
							border-radius: 50%;
							width: 80%;
							height: 80%;
							border: solid 4rpx #ffff00;
							display: flex;
							justify-content: center;
							align-items: center;
							animation: yis 3s infinite;
							border-left: 4rpx solid transparent;
							border-right: 4rpx solid transparent;

							@keyframes yis {
								0% {
									transform: rotate(0deg);
								}

								100% {
									transform: rotate(-360deg);
								}
							}

							.mainIcons {
								transform: translate(-50%, -50%);
								width: 45%;
								height: 45%;
								border-radius: 50%;
								border: solid 4rpx #4e6ef2;
								border-top: 4rpx solid transparent;
								border-bottom: 4rpx solid transparent;
								display: flex;
								align-items: center;
								justify-content: center;
								animation: y 2s infinite;

								&:before {
									content: '';
									width: 70%;
									height: 10%;
									border-radius: 50%;
									background-color: #00ffff;
									animation: y 1s infinite;
									box-shadow: 0rpx 0rpx 10rpx #ffff00,
									0rpx 0rpx 20rpx #ffff00,
									0rpx 0rpx 30rpx #ffff00,
									0rpx 0rpx 40rpx #0000ff,
									0rpx 0rpx 50rpx #0000ff,
									0rpx 0rpx 60rpx #0000ff,
									0rpx 0rpx 70rpx #0000ff,
									0rpx 0rpx 80rpx #0000ff,
									0rpx 0rpx 90rpx #0000ff,
									0rpx 0rpx 100rpx #0000ff,
									0rpx 0rpx 110rpx #0000ff,
									;

									@keyframes y {
										0% {
											transform: rotate(0deg);
										}

										100% {
											transform: rotate(360deg);
										}
									}
								}
							}
						}
					}

					.mainLingText {
						text-align: center;
						padding-bottom: 20rpx;
						word-wrap: break-word;
					}
				}

				.mainBtn {
					margin-top: 15rpx;
					display: flex;
					justify-content: space-around;
					align-items: center;
					font-size: 34rpx;

					.mainBtnr {
						padding: 15rpx 30rpx;
						background-color: #4e6ef2;
						border-radius: 10rpx;
						color: #fff;
					}

					.mainBtnl {
						padding: 15rpx 30rpx;
						background-color: #aaaa00;
						border-radius: 10rpx;
						color: #fff;
					}
				}
			}
		}

		@keyframes fadeZoom {
			0% {
				transform: scale(0.7);
				opacity: 0.6;
			}

			80% {
				transform: scale(1.2);
				opacity: 0.3;
			}

			100% {
				transform: scale(1);
				opacity: 1;
			}
		}
	}
</style>

 使用加载或提示框的时候记得给定时器将showBtn变成false

<template>
    <view>
		<show-modal :showBtn="showBtn" :loginW="loginW" :nameGet="nameGet"></show-modal>
	</view>
</template>
<script>
import showModal from "@/components/pageIndex/showModal.vue"
	export default {
		components:{
			showModal
		},
		data() {
			return {
				showBtn:false  ,//弹窗按钮
				loginW:'',  //正在加载   使用加载提示  nameGet就用不了
				nameGet:''  //提示框内容
				
			}
		},
        methods: {
            getpen() {
				this.showBtn=true
                this.loginW=""
				this.nameGet='直播未开始'
				setTimeout(()=>{
					this.showBtn=false
					this.nameGet=''
				}, 1500);
			},
        }
    }
</script>