FiDA_Front/src/components/dropdown-menu.vue

<template>
	<el-dropdown trigger="click" placement="bottom-end">
		<div class="title">
			<span class="label">{{ title }}</span>
			<span class="icon"><svg-icon name="arrow-bottom" size="10" color="#000" /></span>
		</div>
		<template #dropdown>
			<el-dropdown-menu>
				<el-dropdown-item
					v-for="item in list"
					:key="item.value"
					:disabled="item.value === modelValue"
					@click="onItemClick(item.value)"
				>
					<div class="menu-item">
						<span class="label">{{ item.label }}</span>
						<span class="icon" v-show="item.value === modelValue">
							<svg-icon name="dui" size="14" color="#000" />
						</span>
					</div>
				</el-dropdown-item>
			</el-dropdown-menu>
		</template>
	</el-dropdown>
</template>

<script setup lang="ts">
	import { onMounted, ref, computed, watch, nextTick } from 'vue'
	const props = defineProps({
		modelValue: {
			type: String,
			default: ''
		},
		list: {
			type: [Array, Object],
			default: () => []
		},
		icon: {
			type: String,
			default: ''
		}
	})
	const title = computed(() => {
		return props.list.find((v) => v.value === props.modelValue)?.label || '---'
	})
	const emit = defineEmits(['update:modelValue', 'change'])
	const onItemClick = (value: string) => {
		emit('update:modelValue', value)
		emit('change', value)
	}
</script>

<style lang="less" scoped>
	.title {
		user-select: none;
		cursor: pointer;
		display: flex;
		align-items: center;
		font-size: 1.4rem;
		color: #000;
		> .label {
			// min-width: 7rem;
		}
		> .icon {
			margin-left: 1.6rem;
		}
	}
	.menu-item {
		display: flex;
		align-items: center;
		width: 100%;
		font-size: 1.4rem;
		color: #000;
		> .label {
			margin-right: auto;
		}
		> .icon {
			margin-left: 1.6rem;
		}
	}
</style>