遇到一个问题:腾讯组件库中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>