72 lines
2.0 KiB
Vue
72 lines
2.0 KiB
Vue
<template>
|
|
<el-date-picker ref="datePickerRef" v-model="internalValue" type="datetime" :clearable="false" v-bind="$attrs" format="YYYY/MM/DD HH:mm"
|
|
:disabled-minutes="disabledMinutes" popper-class="popperTime" :visible-change="visibleChange" style="display: none"
|
|
value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
|
|
</template>
|
|
|
|
<script setup name="DataTime">
|
|
import { ref, nextTick } from 'vue';
|
|
import { defineExpose } from 'vue';
|
|
|
|
const datePickerRef = ref(null); // 获取组件实例
|
|
|
|
const internalValue = ref(null);
|
|
|
|
// 暴露给父组件的方法
|
|
const openPicker = () => {
|
|
datePickerRef.value.focus(); // 触发 Element 的 focus 方法
|
|
};
|
|
defineExpose({ openPicker }); // 暴露方法
|
|
|
|
const disabledMinutes = () => {
|
|
hideInvalidMinutes();
|
|
return Array.from({ length: 60 }, (v, k) => k).filter(minute => ![0, 15, 30, 45].includes(minute));
|
|
};
|
|
|
|
const hideInvalidMinutes = () => {
|
|
nextTick(() => {
|
|
const minuteItems = document.querySelectorAll('.el-time-panel .el-time-spinner__wrapper:nth-child(2n) .el-time-spinner__item');
|
|
minuteItems.forEach(item => {
|
|
const minute = parseInt(item.textContent, 10);
|
|
if (![0, 15, 30, 45].includes(minute)) {
|
|
item.classList.add('is-disabled');
|
|
item.style.display = 'none';
|
|
} else {
|
|
item.classList.remove('is-disabled');
|
|
item.style.display = '';
|
|
}
|
|
});
|
|
});
|
|
};
|
|
|
|
const handleGlobalFocus = (event) => {
|
|
const target = event.target;
|
|
if (target && target.closest('.el-date-range-picker__time-picker-wrap:nth-child(2n) .el-input__inner')) {
|
|
hideInvalidMinutes();
|
|
}
|
|
};
|
|
|
|
const visibleChange = () => {
|
|
document.addEventListener('focus', handleGlobalFocus, true);
|
|
};
|
|
</script>
|
|
|
|
<style lang="css">
|
|
.popperTime {
|
|
|
|
.el-time-panel__content:after,
|
|
.el-time-panel__content:before {
|
|
content: none;
|
|
}
|
|
|
|
.el-time-spinner__list:after,
|
|
.el-time-spinner__list:before {
|
|
content: none !important;
|
|
}
|
|
|
|
.el-time-spinner__item.is-active:not(.is-disabled) {
|
|
background-color: var(--el-datepicker-active-color);
|
|
color: #fff;
|
|
}
|
|
}
|
|
</style> |