用VUE写一个点击弹出收起的窗口

今天写了一个小组件用到vue自带的<transition>组件，记录一下以防忘记。

<template>
	<view class='purchase-list'>
		<transition name="slide">
			<view class="xn-container" v-show="show">
				<view class="Btnclear">
					<button style="position:absolute;bottom:2px;width: 100%;" @click="showCssPopup(false)">查询</button>
				</view>
			</view>
		</transition>
//引入一个下拉图片，定位在顶部，在窗口收起后显示出现
		<image src="../../static/DropDown.png" style="width: 20px;height: 20px;position: absolute;left: 45%;"
			v-show="show2" @click="showCssPopup(true)"></image>

	</view>
</template>
<script>
    export default {
                data() {
			        return {
                show: true,
				show2: false,
        }
    }，        
                methods: {
                showCssPopup(flag) {
				this.show = flag;
				this.show2 = !flag;
			},
    }
}
</script>
<style lang='scss'>
//定义整个下拉窗的宽高
	.xn-container {
		height: 50vh; //这里单位不能用%因为移动端识别不了，vh可以代替
		background-color: pink;
		width: 100%;
		position: absolute;
	}
    //定义开始和结束的时间间隔
	.slide-enter-active,.slide-leave-active {
		transition: all .3s;
	}
    //定义窗体移动的位置
	.slide-enter,.slide-leave-to {
		margin-top: -400px;
	}
</style>