image.png

封装日期组件(simulateDate.vue)

<template>
    <div>
        <div>
            <el-button type="primary" @click="toggleDatePicker">选择日期</el-button>
            <el-date-picker class="dateStyle1" :clearable="false" v-model="dateTimeValue" ref="timePick" :teleported="true" type="dates"
                format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="选择日期">
                <template #footer>
                </template>
            </el-date-picker>
        </div>
        <el-tag class="dateLabel" size="large" v-for="(tag, index) in dateTimeValue" :key="index" :closable="closable" type="primary"
            :disable-transitions="false" @close="handleClose(index)">
            {{ tag }}
        </el-tag>
    </div>
</template>

组件script

const { proxy } = getCurrentInstance();
const emit = defineEmits();
const dateTimeValue = ref('')
const props = defineProps({
    modelValue: [String, Object, Array],
    closable:{
        // 是否可以删除
        type: Boolean,
        default: true
    }
})

// 数据监听
watch(() => dateTimeValue.value, (newValue) => {
    console.log(props.modelValue);
    console.log(newValue);
    if (newValue) {
        dateTimeValue.value = newValue.sort((a, b) => new Date(a) - new Date(b))
        emit('update:modelValue', dateTimeValue.value)
    }
}, { deep: true, immediate: true });
onMounted(() => {
    dateTimeValue.value = props.modelValue
})
function toggleDatePicker() {
    // 选择日期
    proxy.$refs.timePick.focus();
}
// 删除日期
function handleClose(index) {
    dateTimeValue.value.splice(index, 1);
}

组件样式

<style scoped lang='scss'>
// 隐藏默认日期选择框
::v-deep .dateStyle1 {
    width: 0px;
    height: 0px;
    padding: 0px;

    .el-input__wrapper {
        padding: 0px;
    }

    .el-input__prefix {
        display: none;
    }
}

.dateLabel {
    margin-right: 10px;
    margin-top: 10px;
}
</style>

父组件

<template>
    <el-form :model="priceInventory" ref="ruleFormRef2" label-width="150px">
             <el-form-item label="日期：">
                    <simulateDate v-model="priceInventory.name7"></simulateDate>
                </el-form-item>
    </el-row>
</template>
//引入组件
import simulateDate from '../simulateDate.vue'