vue3+elementplus:el-dialog内使用el-time-picker和el-date-picker时,不正常

环境:

vue3:3.2.29

element plus:2.0.3(2.0.2也试过,问题一样)

vite:2.7.2

chrome: 96.0.4664.110(正式版本) (64 位)

==========================================================

问题:(1)打开dialog时,时间或日期选择器会自动获得焦点,但poper偏位;(2)点击取消、确定按钮或点击某一日期,poper不能自己关闭,关闭poper的唯一途径点击dialog上能获得焦点的输入框;

==========================================================

代码:

<template>

  <div class="box">

    <el-button type="primary" @click="dialogVisible = true">测试</el-button>

      <el-dialog

      v-model="dialogVisible"

      title="Tips"

      width="50%"

      :destroy-on-close="true"

    >

      <div class="example-basic">

        <el-time-picker v-model="value1" arrow-control placeholder="Arbitrary time">

        </el-time-picker>

        <el-time-picker v-model="value2" arrow-control placeholder="Arbitrary time">

        </el-time-picker>

        <el-date-picker

        v-model="value3"

        type="date"

        placeholder="Pick a day"

        :disabled-date="disabledDate"

        :shortcuts="shortcuts"

      >

      </el-date-picker>

      </div>


 

      <template #footer>

        <span class="dialog-footer">

          <el-button @click="dialogVisible = false">Cancel</el-button>

          <el-button type="primary" @click="dialogVisible = false"

            >Confirm</el-button

          >

        </span>

      </template>

    </el-dialog>

  </div>

</template>

 

<script lang="ts" setup>

import { ref } from 'vue'

 

const dialogVisible = ref(false)

const value1 = ref()

const value2 = ref()

const value3 = ref()

 

</script>

 

<style lang="scss" scoped>

  .box {

    padding: 15px;

  }

</style>

我也遇到了 同样的问题 时间组件面板 无法关闭