<template>
<view class="content">
<button @click="open">open</button>
<view class="mask" v-if="toogle" @click="open"></view>
<view class="picker" :class="{'uni-picker-toggle':toogle}"></view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
toogle:false,
}
},
onLoad() {
},
methods: {
open(){
this.toogle=!this.toogle;
},
}
}
</script>
<style>
.content {
text-align: center;
height: 400upx;
}
.mask{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 999;
background: rgba(0, 0, 0, 0.5);
}
.picker{
position: fixed;
left: 0;
bottom: 0;
z-index: 999;
width: 100%;
height: 400upx;
background-color: #fff;
transform: translateY(100%);
backface-visibility: hidden;
visibility: hidden;
transition-duration: .3s,.3s;
}
.uni-picker-toggle{
visibility: visible;
transform: translate(0);
}
</style>
uni picker 遮罩从下滑出
最新推荐文章于 2024-07-17 14:56:16 发布