首先通过css样式去隐藏el-date-picker的年月日
因为el-date-picker 的label-format只能出现年月日 时分秒 所以用el-input进行伪装成el-date-picker
el-date-picker记得设置visible:hidden不能是display:none
通过点击el-input的时候触发el-date-picker的handleOpen()方法,element上没有
<template>
<div>
<el-input v-model="selectedTime" readonly @click="showTimePicker"></el-input>
<el-time-picker :teleported='false' style='visible:hidden' v-model="selectedTime" :picker-options="pickerOptions" ref="timePicker" @change="handleTimeChange"></el-time-picker>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const selectedTime = ref('');
const timePicker = ref(null);
const pickerOptions = {
selectableRange: '00:00:00 - 23:59:59'
};
const showTimePicker = () => {
timePicker.value.handleOpen(); //这个方法element上没写 但是可以通过这样去打开
};
const handleTimeChange = (value) => {
selectedTime.value = value ? value.split(':').slice(0, 3).join(':') : '';
};
return {
selectedTime,
timePicker,
pickerOptions,
showTimePicker,
handleTimeChange
};
}
};