设置页面

src/components/dropdown-menu.vue

@@ -0,0 +1,64 @@
+<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)"
+					style="--el-font-size-base: 1.4rem; --el-text-color-regular: #000"
+				>
+					<span>{{ item.label }}</span>
+				</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;
+		}
+	}
+</style>