logpm/compoment/PullDownBox/PullDownBox.vue

<template>
	<view class="PullDownBox">
		<view @click="() => handleShowPullDown()" class="Pulldown-title-container">
			<!-- 标题显示内容 -->
			<view class="Pulldown-title">
				<slot name="title"></slot>
			</view>

			<template v-if="props.isShowIcon">
				<view :class="{'icon': true,'flex-c-c': true,'normal':isShowPullDownBox, 'active': !isShowPullDownBox}">
					<u-icon class="icon" name="arrow-down" color="#2979ff" size="30"></u-icon>
				</view>
			</template>
		</view>

		<template v-if="isShowPullDownBox && !props.ExistenceOrNot">
			<view class="Pulldown_content">
				<slot name="content"></slot>
			</view>
		</template>

		<template v-else-if="props.ExistenceOrNot">
			<view class="Pulldown_content transition" :style="{height: isShowPullDownBox ? details.contentHeight: '0px'}">
				<view class="Pulldown_content_info">
					<slot name="content"></slot>
				</view>
			</view>
		</template>
	</view>


</template>

<script setup lang="ts">
	import { ref, defineExpose, defineProps, defineEmits, getCurrentInstance, reactive, nextTick, onMounted, watch } from 'vue';

	/** 是否显示下拉框 */
	const isShowPullDownBox = ref(false)

	const instance = getCurrentInstance()

	const props = defineProps({
		/** 是否显示icon */
		isShowIcon: {
			type: Boolean,
			default: true
		},
		/** 是否隐藏式保留节点 */
		ExistenceOrNot: {
			type: Boolean,
			default: false
		},
		/** 是否初始化显示 */
		isShow: {
			type: Boolean,
			default: false
		},
	})

	const emit = defineEmits(['change'])

	const details = reactive({
		contentHeight: 'auto'
	})

	/** 是否显示下拉内容 */
	const handleShowPullDown = (flag = !isShowPullDownBox.value) => {
		isShowPullDownBox.value = flag

		emit('change', flag)

		if (!props.ExistenceOrNot || !flag) return

		uni.createSelectorQuery().in(instance).select('.Pulldown_content_info').boundingClientRect(async function (rect) {
			await nextTick()
			details.contentHeight = rect.height + 'px'
		}).exec();
	}

	watch(() => props.isShow, () => {
		// console.log('111 :>> ', 111);
		isShowPullDownBox.value = props.isShow;
		nextTick(() => {
			handleShowPullDown(isShowPullDownBox.value)
		})
	}, { immediate: true })

	defineExpose({ isShowPullDownBox, handleShowPullDown })
</script>

<style lang="scss" scoped>
	@import url(@/utils/style/common.scss);

	.PullDownBox {
		overflow: hidden;
		position: relative;
	}

	.Pulldown-title-container {
		display: flex;
		// padding: 15upx;
	}

	.Pulldown-title {
		flex: 1;
	}

	.icon {
		padding: 0 10upx;
		flex: none;
		transition: all 0.2s;
	}

	.Pulldown_content {

		&.transition {
			transition: all 0.3s;
			overflow: hidden;
		}
	}

	.normal {
		transform: rotate(0deg);
	}

	.active {
		transform: rotate(180deg);
	}
</style>