uniapp 自定义组件 自定义抽屉 由下向上

<template>
<view class="">
<view :class="show?'hldrawer-over':'show-hldrawer-over'" @click="close">
</view>
<view  :class="show?'showhldrawer':'hldrawer'">
<image @click="close()" class="drawer-close" src="../static/type/guanbi.png" mode=""></image>
<slot />
</view>
</view>
</template>
<script>
export default {
data(){
return{
show:false
}
},
//属性
props: {
},
//组件生命周期
created:function(e){
},
methods: {
open(){
this.show = true
},
close(){
this.show = false
}
}
}
</script>
<style>
.hldrawer-over{
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgb(0,0,0,0.5);
z-index: 100;
display: block;
}
.hldrawer{
transition: 0.2s;
height: 0;
width: 100%;
border-top-left-radius: 16rpx;
border-top-right-radius: 16rpx;
background-color: #FFFFFF;
position: fixed;
bottom: 0;
z-index: 101;
overflow: hidden;
padding-bottom: var(--window-bottom);
}
.showhldrawer{
transition: 0.2s;
height: 650rpx;
width: 100%;
border-top-left-radius: 16rpx;
border-top-right-radius: 16rpx;
background-color: #FFFFFF;
position: fixed;
bottom: 0;
z-index: 101;
overflow: hidden;
padding-bottom: var(--window-bottom);
}
.show-hldrawer-over{
transition: 1.5s;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgb(0,0,0,0.5);
z-index: 100;
display: none;
}
.drawer-close{
width: 32rpx;
height: 32rpx;
position: absolute;
right: 20rpx;
top: 20rpx;
}
</style>

在引用页面

import hldrawer from "component/hldrawer.vue"
export default {
components: {
hldrawer
},