uniapp实现这该死的自定义弹窗

最近自己学习和写这个uniapp,刚开始规划的时候就觉得自己到时候会需要一个这个弹框,弹框里面药房input这样的东西什么的,然后就在想uniapp里面会不会没有这个modal呢?
转念一想应该是会有的吧,毕竟是一个框架嘛.然后我就找找找,找了好久都没找到合适的.可能是人家有我没找到吧,最后我放弃了
可是找的过程花了我还几分钟啊,tmd,找半天发现了好多人都是自己写的.
最后我决定自己也写一个,也费不了多少时间,代码如下:
宽度高度什么的自己去调样式吧,一个手机大小的地方写一些这样的东西还是不费什么事的,还是自己多动脑,靠别人很难靠得住啊家人们

<template>
	<view class="">
		<button @tap="showModal=true">点我显示</button>
		<view class="mask" v-if="showModal">
			<view class="inside">
				<view class="inside-top">
					<text>输入内容</text>
				</view>
				<view class="inside-middle">
					<text>我要开始装逼了</text>
				</view>
				<view class="inside-bottom" @tap="clooseModal()">
					<view>
						<text>取消</text>
					</view>
					<view>
						<text>确认</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				showModal:false
			}
		},
		methods:{
			clooseModal(){
				this.showModal=false
			},
		}
	}
</script>

<style lang="scss">
	.mask{
		width: 100vw;
		height:100vh;
		background-color: lightgray;
		z-index: 30;
		position: absolute;
		top:0px;
		left: 0px;
		.inside{
			width: 50vw;
			height:20vh;
			position: absolute;
			left:25vw;
			top: 30vh;
			background-color: #eee;
			z-index: 40;
			.inside-top{
				height: 8vh;
				width: 50vw;
				text-align: center;
				text{
					width: 100%;
					line-height: 8vh;
					font-size: 16px;
				}
			}
			.inside-middle{
				width: 50vw;
				text-align: center;
			}
			.inside-bottom{
				position: absolute;
				bottom: 0px;
				height: 5vh;
				width: 50vw;
				display: flex;
				align-items: center;
				justify-content: center;
				view{
					height: 100%;
					flex:1;
					text-align: center;
					text{
						line-height: 5vh;
					}
				}
			}
		}
	}
</style>