tDesign 组件 t-dialog无法关闭

遇到一个问题：腾讯组件库中t-dialog组件，点击关闭按钮或者×无法正常关闭，会关闭后在弹出。项目中其他页面也用过弹窗并未遇到这个问题，对比其他页面的代码发现，无法正常关闭的弹窗加上 attach="body" 就可以正常使用了， 但是这种解决办法并不好。代码附上：

<template>
  <div class="user-info-head" @click="editCropper">
    <t-dialog :header="title" v-model:visible="visible" width="800px">
      <p>123</p>
    </t-dialog>
  </div>
</template>

<script setup>
import { ref, reactive  } from 'vue'

const visible = ref(false);
const title = ref("修改头像");

/** 编辑头像 */
function editCropper() {
  visible.value = true;
}

</script>

去官网看了，最基础的也是可以直接使用的。后来对比了很久，一直调试，，，，发现是因为dialog嵌套的div上加的点击事件，点击dialog关闭按钮或者×，会向上冒泡到外层div，触发点击事件，导致visile又赋值为true。

后来修改为：

<template>
  <div class="user-info-head">
    <t-button @click="editCropper"></t-button> // 随便换个元素触发
    <t-dialog :header="title" v-model:visible="visible" width="800px">
      <p>123</p>
    </t-dialog>
  </div>
</template>

// 或者下面写法

<template>  // 同级不要触发冒泡就好
  <div class="user-info-head" @click="editCropper">
  </div>
  <t-dialog :header="title" v-model:visible="visible" width="800px">
    <p>123</p>
  </t-dialog>
</template>