el-date-picker实现只出时分秒

首先通过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
    };
  }
};