最近自己学习和写这个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>