65 lines
1.4 KiB
Vue
65 lines
1.4 KiB
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)"
|
||
|
|
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>
|