dreamland/lib/graceUI/components/graceNvueDrawer.vue

<template>
	<view>
		<view class="grace-drawer-shade" v-if="show" @click.stop="closeDrawer" @touchmove.stop.prevent="" :style="{backgroundColor:background}"></view>
		<view ref="graceDrawerMenu" v-if="show" class="grace-drawer-nav" @tap.stop="stopFun" 
		:style="{width:width+'rpx', left : direction == 'left' ? (width*-1)+'rpx' : 'none', top : top+'px', 
			right : direction == 'right' ? (width*-1)+'rpx' : 'none', 
			padding:padding, backgroundColor:slotBg}">
			<view class="grace-drawer-main"><slot name="links"></slot></view>
		</view>
	</view>
</template>
<script>
export default {
	name: "graceDrawer",
	props: {
		width : {
			type : Number,
			default : 500
		},
		show : {
			type : Boolean,
			default : true
		},
		direction : {
			type : String,
			default : 'left'
		},
		background:{
			type : String,
			default : 'rgba(0, 0, 0, 0.5)'
		},
		slotBg:{
			type : String,
			default : 'rgba(255, 255, 255, 1)'
		},
		padding : {
			type : String,
			default : '30rpx'
		},
		top:{type:Number, value:0}
	},
	updated:function(){
		if(this.show){
			setTimeout(()=>{
				var moveX = this.direction == 'left' ? uni.upx2px(this.width) + 'px' : (uni.upx2px(this.width) * -1) + 'px';
				var animation = weex.requireModule('animation');
				animation.transition(this.$refs.graceDrawerMenu, {
					styles: {transform:'translate('+moveX+', 0)'},
					duration:200, 
					timingFunction: 'linear',
					needLayout:false,
					delay: 0 
					}, function (){}
				);
			}, 100);
		}
	},
	methods:{
		closeDrawer : function(){
			this.$emit('closeDrawer');
		},
		stopFun : function(){}
	}
}
</script>
<style scoped>
.grace-drawer-shade{position:fixed; width:750rpx; bottom:0; top:0; left:0; background-color:rgba(0, 0, 0, 0.5);}
.grace-drawer-nav{background-color:#FFFFFF; position:fixed; bottom:0; top:0;}
.grace-drawer-main{}
</style>