<template>
|
<el-select
|
class="w-32"
|
:style="{ width: selectWidth }"
|
v-model="selectValue"
|
@change="changeValue"
|
:disabled="disabled"
|
:placeholder="data.title"
|
>
|
<el-option v-for="item in selectList" :key="item.value" :value="item.value" :label="item.title"></el-option>
|
</el-select>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, type PropType, computed } from 'vue';
|
import { getTextWidth } from '/@/utils/util';
|
import { StepParam } from '../types';
|
import { DAY_STEP_LIST, HOUR_STEP_LIST, IS_DAY_LIST } from './constants';
|
|
const props = defineProps({
|
data: {
|
type: Object as PropType<StepParam>,
|
},
|
disabled: {
|
type: Boolean,
|
default: false,
|
},
|
});
|
|
const getSelectList = (defaultStepValue: string) => {
|
if (IS_DAY_LIST.includes(defaultStepValue)) {
|
return DAY_STEP_LIST;
|
} else {
|
return HOUR_STEP_LIST;
|
}
|
};
|
|
const selectList = getSelectList(props.data?.origin?.step_value);
|
// const fontSize = ref('14px');
|
|
const emit = defineEmits(['change']);
|
const SELECT_OFFSET = 47;
|
const selectWidth = computed(() => {
|
if (props.data?.list?.length > 0) {
|
// 以最大字长为宽度
|
const widthList = props.data.list.map((item) =>
|
getTextWidth(item.title, {
|
size:'14px',
|
})
|
);
|
const maxWidth = Math.max(...widthList);
|
const realWidth = maxWidth + SELECT_OFFSET;
|
return realWidth + 'px';
|
} else {
|
return 0;
|
}
|
});
|
|
const selectValue = defineModel({
|
type: String,
|
});
|
|
const changeValue = (val) => {
|
emit('change', val);
|
};
|
</script>
|
<style scoped lang="scss">
|
:deep(.el-input) {
|
font-size: 14px;
|
}
|
</style>
|
