cgst/components/uni-drawer/uni-drawer.vue

<template>
	<view v-if="visibleSync" :class="{ 'uni-drawer--visible': showDrawer }" class="uni-drawer">
		<view class="uni-drawer__mask" :class="{ 'uni-drawer__mask--visible': showDrawer && mask }" @tap="close" />
		<view class="uni-drawer__content" :class="{ 'uni-drawer--right': rightMode, 'uni-drawer--left': !rightMode, 'uni-drawer__content--visible': showDrawer }">
			<view class="content">
				<view class="item" v-for="ls in relist">
					<view class="content_box" :class="{ active: ls.id == checkid }"  @click="change(ls)">{{ls.name}}</view>
					<view v-if="ls.id == checkid" class="content_img"><image src="/static/xpy/023.png"></image></view>
					<view v-else></view>
				</view>
			</view>
			<view class="submit" @click="submit()">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'UniDrawer',
	props: {
		/**
		 * 显示状态
		 */
		visible: {
			type: Boolean,
			default: false
		},
		/**
		 * 显示模式（左、右），只在初始化生效
		 */
		mode: {
			type: String,
			default: 'right'
		},
		/**
		 * 蒙层显示状态
		 */
		mask: {
			type: Boolean,
			default: true
		}
		
	},
	data() {
		return {
			visibleSync: false,
			showDrawer: false,
			rightMode: false,
			watchTimer: null,
			show:false,
			checkid:1,
			value:'',
			relist:[
				{
					id:1,
					name:'产品成本'
				},{
					id:2,
					name:'其他 '
				},{
					id:3,
					name:'返款	'
				},{
					id:'',
					name:'全部	'
				}]
		};
	},
	watch: {
		visible(val) {
			if (val) {
				this.open();
			} else {
				this.close();
			}
		}
	},
	created() {
		this.visibleSync = this.visible;
		setTimeout(() => {
			this.showDrawer = this.visible;
		}, 100);
		this.rightMode = this.mode === 'right';
	},
	methods: {
		change(ls){
		  this.checkid = ls.id;
		  this.value  = ls.name;
		  console.log(this.checkid,this.value,77)
		},
		submit(){
			this.close();
			// console.log(this.value,this.checkid,66)
			 this.$emit('getMessage', this.value,this.checkid)
		},
		close() {
			this._change('showDrawer', 'visibleSync', false);
		},
		open() {
			this._change('visibleSync', 'showDrawer', true);
		},
		_change(param1, param2, status) {
			this[param1] = status;
			if (this.watchTimer) {
				clearTimeout(this.watchTimer);
			}
			this.watchTimer = setTimeout(
				() => {
					this[param2] = status;
					this.$emit(status ? 'open' : 'close');
				},
				status ? 50 : 300
			);
		}
	}
};
</script>

<style lang="scss" scoped>
// 抽屉宽度
$drawer-width: 220px;
.uni-drawer {
	/* #ifndef APP-NVUE */
	display: block;
	/* #endif */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	z-index: 999;
}

.uni-drawer__content {
	/* #ifndef APP-NVUE */
	display: block;
	/* #endif */
	position: absolute;
	top: 0;
	width: $drawer-width;
	bottom: 0;
	background-color: $uni-bg-color;
	transition: transform 0.3s ease;
	padding: 100rpx 0rpx;
}
.content {
	font-size: 30rpx;
	color: #333333;
}
.item{
	display: inline-block;
}
.content_box{
	border: 2rpx solid #CCCCCC;
	padding: 15rpx 0rpx;
	margin-bottom: 30rpx;
	width: 190rpx;
	border-radius: 10rpx;
	display: inline-block;
	margin-right: 10rpx;
	margin-left: 15rpx;
}
.content_img{
	position: absolute;
	margin-top: -65rpx;
	margin-left: 155rpx;
}
.content_img image{
	width: 50rpx;
	height: 35rpx;
}
.submit{
	font-size: 30rpx;
	color: #FFFFFF;
	background:linear-gradient(90deg,rgba(253,59,51,1) 0%,rgba(254,75,52,1) 100%);
	box-shadow:0px 0px 10px 1px rgba(235,37,27,0.3);
	border-radius:10px;
	width: 83%;
	margin: 50rpx auto;
	padding: 20rpx 0rpx;
}
.uni-drawer--left {
	left: 0;
	transform: translateX(-$drawer-width);
}

.uni-drawer--right {
	right: 0;
	transform: translateX($drawer-width);
}

.uni-drawer__content--visible {
	transform: translateX(0px);
}

.uni-drawer__mask {
	/* #ifndef APP-NVUE */
	display: block;
	/* #endif */
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: $uni-bg-color-mask;
	transition: opacity 0.3s;
}

.uni-drawer__mask--visible {
	/* #ifndef APP-NVUE */
	display: block;
	/* #endif */
	opacity: 1;
}
.active{
	background-color: #FDF2F0;
	color:#FC2A3F ;
	border: 2rpx solid #FC2A3F;
}
</style>