94 lines
2.4 KiB
Vue
94 lines
2.4 KiB
Vue
<template>
|
|
<Select
|
|
v-model="quantity"
|
|
:options="quantityOptions"
|
|
class="quantity-select"
|
|
position="top"
|
|
>
|
|
<template #prefix>
|
|
<img :src="selectedIcon" alt="" style="width: 20px;">
|
|
</template>
|
|
<template #option="{ option }">
|
|
<div class="option-content-custom">
|
|
<img :src="option.icon" alt="" style="width: 20px;">
|
|
<span v-if="option.labelText" class="option-label-text">{{ option.labelText }}</span>
|
|
</div>
|
|
</template>
|
|
</Select>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Select from '@/components/Select/index.vue'
|
|
import videoPattern1 from '@/assets/dialog/videoPattern1.svg'
|
|
import videoPattern2 from '@/assets/dialog/videoPattern2.svg'
|
|
import videoPattern3 from '@/assets/dialog/videoPattern3.svg'
|
|
import videoPattern4 from '@/assets/dialog/videoPattern4.svg'
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: String,
|
|
default: '全能参考'
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['update:modelValue'])
|
|
|
|
const quantity = computed({
|
|
get: () => props.modelValue,
|
|
set: (value) => emit('update:modelValue', value)
|
|
})
|
|
|
|
const quantityOptions = [
|
|
{ value: '全能参考', label: '全能参考', labelText: '全能参考', icon: videoPattern1 },
|
|
{ value: '首尾帧', label: '首尾帧', labelText: '首尾帧', icon: videoPattern2 },
|
|
{ value: '智能多帧', label: '智能多帧', labelText: '智能多帧', icon: videoPattern3 },
|
|
{ value: '主体参考', label: '主体参考', labelText: '主体参考', icon: videoPattern4 }
|
|
]
|
|
|
|
const selectedIcon = computed(() => {
|
|
const option = quantityOptions.find(opt => opt.value === quantity.value)
|
|
return option ? option.icon : videoPattern1
|
|
})
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.quantity-select {
|
|
:deep(.select-header) {
|
|
height: 40px;
|
|
padding: 0 15px;
|
|
border-radius: 10px;
|
|
border: 1px solid #E8E9EB;
|
|
background: #f5f6f7;
|
|
|
|
&:hover {
|
|
background: #e9eaeb;
|
|
}
|
|
}
|
|
|
|
:deep(.select-text) {
|
|
font-size: 14px;
|
|
}
|
|
|
|
:deep(.dropdown-menu) {
|
|
min-width: 140px;
|
|
}
|
|
|
|
:deep(.dropdown-item) {
|
|
min-width: 80px;
|
|
justify-content: start;
|
|
}
|
|
}
|
|
|
|
.option-content-custom {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: start;
|
|
gap: 8px;
|
|
}
|
|
|
|
.option-label-text {
|
|
font-size: 14px;
|
|
color: inherit;
|
|
}
|
|
</style>
|