<template>
	<view class="content" v-show="value">
		<slot></slot>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: Boolean,
				default: false
			},
		},
		watch: {
			value: {
				// 数据发生变化就会调用这个函数  
				handler(newVal, oldVal) {
					this.$nextTick(async()=>{
						console.log(await this.size())
					})
				},
				// 立即处理 进入页面就触发
				// immediate: true
			}
		},
		methods: {
			async size() {
				let res = await this.query(".content", this)
				return res.height
			},
			query(selector, that) {
				return new Promise(resolve => {
					let query = uni.createSelectorQuery()
						.in(that)
						.select(selector);
					query.boundingClientRect(res => {
						resolve(res)
					}).exec();
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		max-height: 0;
		overflow: hidden;
		transition: max-height .5s linear;
		&.close{
			
		}
	}
</style>
