85 lines
1.7 KiB
Vue
85 lines
1.7 KiB
Vue
<template>
|
|
<Select
|
|
v-model="quantity"
|
|
:options="quantityOptions"
|
|
class="quantity-select"
|
|
position="top"
|
|
>
|
|
<template #prefix>
|
|
<img src="@/assets/dialog/time.svg" alt="" style="width: 20px;">
|
|
</template>
|
|
<template #header>
|
|
<span class="header">选择视频生成时长</span>
|
|
</template>
|
|
</Select>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Select from '@/components/Select/index.vue'
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: Number,
|
|
default: 1
|
|
},
|
|
options: {
|
|
type: Array,
|
|
default: () => [
|
|
{ value: 5, label: '5s' },
|
|
{ value: 6, label: '6s' },
|
|
{ value: 7, label: '7s' },
|
|
{ value: 8, label: '8s' },
|
|
{ value: 9, label: '9s' },
|
|
{ value: 10, label: '10s' }
|
|
]
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['update:modelValue'])
|
|
|
|
const quantity = computed({
|
|
get: () => props.modelValue,
|
|
set: (value) => emit('update:modelValue', value)
|
|
})
|
|
|
|
const quantityOptions = computed(() => props.options)
|
|
</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: 136px;
|
|
}
|
|
|
|
:deep(.dropdown-item) {
|
|
min-width: 80px;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
.header{
|
|
margin-left: 10px;
|
|
color: #999;
|
|
font-family: "Microsoft YaHei";
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
}
|
|
</style>
|