diagnosis_app/components/Accordion/index.vue

<template>
	<view class="accordion-content">
		<view class="accordion-mask" :class="[direction,{'fixed':fixed,'hide':hide}]" @click.stop="handle(1)">	
			<slot name="item">
				<view class="accordion-item"   @click.stop="handle(2)">
					<p :class="direction"></p>
					<slot name="cont"></slot>
				</view>
			</slot> 	
		</view>
	</view>
</template>

<script>
	export default{
		name:"zhcx-accordion",
		props:{
			type:{
				type:[String,Number],
				default:"1"
			},
			fixed:{
				type:[String,Boolean],
				default:true			
			},
			direction:{
				type:[String],
				default:"lf"			
			}
		},
		data:()=>{
			return{
				hide:false
			}
		},
		methods:{
			handle(type){
				if(type===1){
					this.hide=true;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.accordion-content{
		.fixed{
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;	
			z-index: 9998;
		}
		.accordion-mask{
			background-color: rgba(0,0,0,0.62);	
			transition: 0.5s;
			.accordion-item{
				background-color: #fff;
				width: 50%;
				height: 100%;
			}	
			&.hide{
				right: 100%;				 
				overflow: hidden;
				&.rt{
					left: 100%;
					right: -100%;
				}
				&.top{
					left: 0;
					right: 0;				
					bottom:0;
					top: 100%;
					transition: 0.8s;
				}
				&.bottom{
					top: 0;
					bottom:100%;
					left: 0;
					right: 0;	
					transition: 0.8s;
				}
			}			
		}
	}
</style>