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

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

<template>
	<view class="">
		<button @tap="showModal=true">点我显示</button>
		<view v-if="showModal">
          <view class="mask"></view>
          <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;
		opacity: .3;
		position: absolute;
		top:0px;
		left: 0px;
	}
	.inside{
		width: 50vw;
		height:20vh;
		position: absolute;
		left:25vw;
		top: 30vh;
		background-color: #fff;
		opacity: 1;
		.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>