145 lines
2.8 KiB
Vue
145 lines
2.8 KiB
Vue
<template>
|
|
<section class="custom_number_select_" style="">
|
|
<el-input-number
|
|
v-model="data.num"
|
|
:precision="_numberSet.precision"
|
|
:step="_numberSet.step"
|
|
:min="_numberSet.min"
|
|
:controls-position="_numberSet.controlsPosition"
|
|
@change="handleChange"
|
|
>
|
|
</el-input-number>
|
|
<el-select v-model="data.value1" class="_center" @change="handleChange">
|
|
<el-option
|
|
v-for="item in props.options1"
|
|
:key="'custom_' + Date.now() + item[props.prop.value]"
|
|
:label="item[props.prop.label]"
|
|
:value="item[props.prop.value]"
|
|
/>
|
|
</el-select>
|
|
<el-select v-model="data.value2" @change="handleChange">
|
|
<el-option
|
|
v-for="item in props.options2"
|
|
:key="'custom_' + Date.now() + item[props.prop.value]"
|
|
:label="item[props.prop.label]"
|
|
:value="item[props.prop.value]"
|
|
/>
|
|
</el-select>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watchEffect } from 'vue';
|
|
|
|
const emit = defineEmits(['update:value']);
|
|
const props = defineProps({
|
|
value: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
num: 1,
|
|
value1: '1',
|
|
value2: '1',
|
|
};
|
|
},
|
|
},
|
|
options1: {
|
|
type: Array,
|
|
default: () => [
|
|
{
|
|
value: '1',
|
|
label: 'value1',
|
|
},
|
|
{
|
|
value: '2',
|
|
label: 'value2',
|
|
},
|
|
{
|
|
value: '3',
|
|
label: 'value3',
|
|
},
|
|
],
|
|
},
|
|
options2: {
|
|
type: Array,
|
|
default: () => [
|
|
{
|
|
value: '1',
|
|
label: '_value1',
|
|
},
|
|
{
|
|
value: '2',
|
|
label: '_value2',
|
|
},
|
|
{
|
|
value: '3',
|
|
label: '_value3',
|
|
},
|
|
],
|
|
},
|
|
set: {
|
|
type: Object,
|
|
default: () => {
|
|
return {};
|
|
},
|
|
},
|
|
numberSet: {
|
|
type: Object,
|
|
default: () => {
|
|
return {};
|
|
},
|
|
},
|
|
prop: {
|
|
type: Object,
|
|
default: () => {
|
|
return { label: 'label', value: 'value' };
|
|
},
|
|
},
|
|
});
|
|
const _numberSet = ref({
|
|
precision: 2,
|
|
step: 1,
|
|
min: 1,
|
|
controlsPosition: 'right',
|
|
});
|
|
const data = ref({
|
|
num: 1,
|
|
value1: '1',
|
|
value2: '1',
|
|
});
|
|
watchEffect(() => {
|
|
data.value = Object.assign(data.value, props.value);
|
|
_numberSet.value = Object.assign(_numberSet.value, props.numberSet);
|
|
if (data.value.num === null) {
|
|
data.value.num = _numberSet.value.min;
|
|
}
|
|
});
|
|
function handleChange() {
|
|
emit('update:value', data.value);
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.custom_number_select_ {
|
|
display: grid;
|
|
grid-template-columns: 56% 22% 22%;
|
|
::v-deep() {
|
|
.el-input-number {
|
|
width: 100%;
|
|
.el-input__wrapper {
|
|
border-radius: 4px 0 0 4px;
|
|
}
|
|
}
|
|
.el-select__wrapper {
|
|
border-radius: 0 4px 4px 0 !important;
|
|
border-left: none;
|
|
}
|
|
._center {
|
|
.el-select__wrapper {
|
|
border-radius: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|