营销型网站架构师网站外链哪里做

1，问题表现

使用 vue3 的 Teleport 实现的 dialog 弹窗，但是在 ios app 中嵌套的 h5 中无法打开。

直接在ios手机浏览器中打开，没有问题。
安卓手机也没有这个问题。

初始关键问题代码如下：

<template><Teleport to="body"><Transition name="modal"><div v-if="open" class="fixed inset-0"><div class="content"><!-- 内容 --></div></div></Transition></Teleport>
</template><style scoped>
.fixed {position: fixed;
}
.inset-0 {inset: 0;
}
</style>

2，解决步骤

1，teleport 的问题

因为这是旧项目（jsp）做前后端分离，使用 vue3 重写的。之前没有这个问题，所以猜测是 vue3 新语法问题。

果然去掉 Teleport 后，弹窗可以出现了，但样式又出问题了。

<template><Transition name="modal">...</Transition>
</template>

可是即便元素没有插入 body 中，但使用的是 fixed 定位，并且任何祖先元素中都没有设置transform、perspective 或者 filter 样式属性，所以也应该正常显示样式。

有问题的样式表现，和 top right bottom left 使用默认值一致。

2，inset 的问题

所以猜测使用了 inset 这个 css 属性导致的。

因为我想实现 dialog 的蒙层是固定定位+铺满全屏。所以样式设置如下：

.fixed {position: fixed;
}
.inset-0 {/* top: 0; right: 0; bottom: 0; left: 0; */inset: 0;
}

将 inset-0 这个 class 样式替换如下，样式就可以正常显示了。

.inset-0 {top: 0;right: 0;bottom: 0;left: 0;
}

至此，问题虽然已经解决，但弹窗组件使用时的结构还是有问题，应该将 dialog 的根组件插入到 body 中才合理。

3，teleport 的问题之二

既然 <Teleport to="body"> 无法使用，那插入目标从 body 替换为其他元素，是否可行？

经过测试，html 也不行，最终设置为 <Teleport to="#app"> ，html结构也算满意了。

---

以上。