67 lines
1.3 KiB
Vue
67 lines
1.3 KiB
Vue
<template>
|
|
<Select
|
|
v-model="quantity"
|
|
:options="quantityOptions"
|
|
class="quantity-select"
|
|
position="top"
|
|
>
|
|
<template #prefix>
|
|
<img src="@/assets/dialog/quantity.svg" alt="" style="width: 16px;">
|
|
</template>
|
|
</Select>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Select from '@/components/Select/index.vue'
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: Number,
|
|
default: 1
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['update:modelValue'])
|
|
|
|
const quantity = computed({
|
|
get: () => props.modelValue,
|
|
set: (value) => emit('update:modelValue', value)
|
|
})
|
|
|
|
const quantityOptions = [
|
|
{ value: 1, label: '1 张' },
|
|
{ value: 2, label: '2 张' },
|
|
{ value: 3, label: '3 张' },
|
|
{ value: 4, label: '4 张' }
|
|
]
|
|
</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: 80px;
|
|
}
|
|
|
|
:deep(.dropdown-item) {
|
|
min-width: 80px;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
</style>
|