fs-uni-template/components/fs-dropdown-item/fs-dropdown-item.vue

<template>
	<view class="fs-dropdown-item">
		<view class="fs-dropdown-item-title" @click="handleToggle">
			<view class="fs-dropdown-item-text">{{ title }}</view>
			<fs-icon class="fs-dropdown-item-icon" type="icon-sort-down" size="26rpx" :class="{ visible }"></fs-icon>
		</view>

		<view class="fs-dropdown-item-content" :class="{ visible }"><slot></slot></view>
	</view>
	<fs-mask v-model="visible" :z-index="99"></fs-mask>
</template>

<script>
/**
 * 下拉组件
 * @description 下拉组件
 * @property {String} title 标题
 */
export default {
	name: 'fs-dropdown-item'
}
</script>

<script setup>
import { ref, inject } from 'vue'

const props = defineProps({
	title: String
})

const visible = ref(false)
let flag = false

const updateState = () => {
	if (flag) {
		flag = false
		visible.value = !visible.value
	} else {
		visible.value = false
	}
}

const dropdownGroup = inject('dropdownGroup')
dropdownGroup.updateChildren({
	updateState
})

const handleToggle = () => {
	flag = true
	dropdownGroup.toggle()
}
</script>

<style lang="scss" scoped>
.fs-dropdown-item {
	flex: 1;
	width: 100%;
	height: 80rpx;
	background-color: #fff;

	&-title {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		z-index: 100;
		padding: 0 20rpx;
		width: 100%;
		height: 100%;
		background-color: #fff;

		.visible {
			transform: rotate(180deg);
			transform-origin: center center;
		}
	}
	&-text {
		margin-right: 10rpx;
	}
	&-icon {
		transition: all 0.2s;
	}

	&-content {
		position: absolute;
		left: 0;
		right: 0;
		top: 80rpx;
		transform: scaleY(0);
		transform-origin: left top;
		transition: all 0.1s;
		z-index: 100;
		background-color: #fff;
		opacity: 0;

		&.visible {
			transform: scaleY(1);
			opacity: 1;
		}
	}
}
</style>