| | |
| | | <template> |
| | | <view v-if="visibleSync" :class="{ 'uni-drawer--visible': showDrawer }" class="uni-drawer" @touchmove.stop.prevent="clear"> |
| | | <view class="uni-drawer__mask" :class="{ 'uni-drawer__mask--visible': showDrawer && mask }" @tap="close('mask')" /> |
| | | <view class="uni-drawer__content" :class="{'uni-drawer--right': rightMode,'uni-drawer--left': !rightMode, 'uni-drawer__content--visible': showDrawer}" :style="{width:drawerWidth+'px'}"> |
| | | <view class="uni-drawer__content" :class="{'uni-drawer--right': rightMode,'uni-drawer--left': !rightMode, 'uni-drawer__content--visible': showDrawer,'custom-style':cusStyle}" :style="{width:drawerWidth+'px',maxHeight:drawerHeight}"> |
| | | <slot /> |
| | | </view> |
| | | <!-- #ifdef H5 --> |
| | |
| | | width: { |
| | | type: Number, |
| | | default: 220 |
| | | }, |
| | | /** |
| | | * 抽屉高度 |
| | | */ |
| | | height: { |
| | | type: String, |
| | | default: '100vh' |
| | | }, |
| | | /** |
| | | * 抽屉高度 |
| | | */ |
| | | cusStyle: { |
| | | type: Boolean, |
| | | default: false |
| | | } |
| | | }, |
| | | data() { |
| | |
| | | showDrawer: false, |
| | | rightMode: false, |
| | | watchTimer: null, |
| | | drawerWidth: 220 |
| | | drawerWidth: 220, |
| | | drawerHeight: null, |
| | | } |
| | | }, |
| | | created() { |
| | | // #ifndef APP-NVUE |
| | | this.drawerWidth = this.width |
| | | this.drawerHeight = this.height |
| | | console.log("执行了",this.drawerHeight,this.height) |
| | | // #endif |
| | | this.rightMode = this.mode === 'right' |
| | | }, |
| | |
| | | bottom: 0; |
| | | background-color: $uni-bg-color; |
| | | transition: transform 0.3s ease; |
| | | overflow-y: auto; |
| | | } |
| | | .custom-style{ |
| | | border-radius: 0 24rpx 24rpx 0; |
| | | } |
| | | |
| | | .uni-drawer--left { |