前言

接到需要把element plus组件的日期时间选择器的input输入框展示隐藏，遇到点击确认按钮change事件不被触发问题，解决办法如下：

①visible-change的回调参考

即根据visible-change的方法里的回调参数进行需要操作

const visibleChange = (val) => {
  console.log('visibleChange');
  if (val) {
    console.log('下拉列表出现');
  } else {
    console.log('下拉列表隐藏');
    console.log('changeSubmit->', DateValue.value);

  }
}

②恢复input组件按钮

完整代码：

<template>
  <el-date-picker ref="dataRef" v-model="DateValue" type="datetime" placeholder="请选择日期时间" class="dataStyle"
    @visible-change="visibleChange" :popper-class="isPopperVisible ? 'dataPopper' : 'dataNormalPopper'"
    value-format="YYYY-MM-DD HH:mm" format="YYYY-MM-DD HH:mm" @change="changeDate" />
</template>

<script setup>
import { ref, } from "vue"

const DateValue = ref('')
const dataRef = ref(null)
const isPopperVisible = ref(true);
const changeDate = (val) => {
  console.log(val, 'changeDate');

}
// 监听时间选择器显示隐藏
const visibleChange = (val) => {
  console.log('visibleChange');
  if (val) {
    console.log('下拉列表出现');
  } else {
    console.log('下拉列表隐藏');
    console.log('changeSubmit->', DateValue.value);

  }
}

</script>