68 lines
1.5 KiB
Vue
68 lines
1.5 KiB
Vue
<template>
|
|
<div class="dropdown">
|
|
<el-dropdown trigger="click" @command="handleCommand">
|
|
<div class="title-box">
|
|
<span class="title">{{ label }}</span>
|
|
<img class="icon" src="@/assets/images/arrow-down.png" />
|
|
</div>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item v-for="(item, index) in options" :key="index" :command="item">
|
|
<span class="label"> {{ item.ssname }}</span>
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
label: {
|
|
type: String,
|
|
default: '请选择'
|
|
},
|
|
options: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
})
|
|
|
|
let emit = defineEmits(['on-change'])
|
|
const handleCommand = (command) => {
|
|
emit('on-change', command)
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.title-box {
|
|
cursor: pointer;
|
|
width: vw(140);
|
|
padding: vw(10) 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: vw(54);
|
|
border: 1px solid rgba(0, 114, 220, 0.3);
|
|
background: linear-gradient(270deg, rgba(8, 41, 86, 0.16) 0%, #0b61b4 100%);
|
|
.title {
|
|
font-weight: 400;
|
|
font-size: vw(13);
|
|
color: #ffffff;
|
|
}
|
|
.icon {
|
|
width: vw(20);
|
|
height: auto;
|
|
margin-left: vh(4);
|
|
}
|
|
}
|
|
.label {
|
|
font-weight: 400;
|
|
font-size: vw(24);
|
|
}
|
|
:deep(.el-dropdown-menu__item) {
|
|
line-height: vh(24);
|
|
padding: vh(10) vw(20) !important;
|
|
}
|
|
</style>
|