ios + vue3 Teleport + inset 兼容性问题

目录

  • 1,问题表现
  • 2,解决步骤
    • [1,teleport 的问题](#1,teleport 的问题)
    • [2,inset 的问题](#2,inset 的问题)
    • [3,teleport 的问题之二](#3,teleport 的问题之二)

1,问题表现

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

直接在ios手机浏览器中打开,没有问题。

安卓手机也没有这个问题。

初始关键问题代码如下:

html 复制代码
<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 后,弹窗可以出现了,但样式又出问题了。

html 复制代码
<template>
  <Transition name="modal">...</Transition>
</template>

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

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

2,inset 的问题

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

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

css 复制代码
.fixed {
  position: fixed;
}
.inset-0 {
  /* top: 0; right: 0; bottom: 0; left: 0; */
  inset: 0;
}

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

css 复制代码
.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

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

3,teleport 的问题之二

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

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


以上。

相关推荐
秋田君5 分钟前
Vue3+Node.js 实现大文件上传:断点续传、秒传、分片上传完整教程(含源码)
前端
爱隐身的官人5 分钟前
ctfshow - web - nodejs
前端·nodejs·ctf
zhong liu bin5 分钟前
Vue框架技术详解——项目驱动概念理解【前端】【Vue】
前端·javascript·vue.js·vscode·vue
W-GEO5 分钟前
前端安全攻防:XSS, CSRF 等常见威胁的防范与检测指南
前端·安全·xss
2301_803554529 分钟前
实习项目包装--HTTP 协议和 Web API
前端·网络协议·http
lssjzmn10 分钟前
Spring Web 异步响应实战:从 CompletableFuture 到 ResponseBodyEmitter 的全链路优化
java·前端·后端·springboot·异步·接口优化
这里有鱼汤10 分钟前
上班族没时间炒股?不妨试试这个隔夜超短战法(附:Python量化源码)
前端
n123523517 分钟前
Chrome 插件开发入门指南:从基础到实践
前端·chrome
前端 贾公子24 分钟前
ElementUI 中 validateField 对部分表单字段数组进行校验时多次回调问题
前端·javascript·elementui
棒棒的唐24 分钟前
vue2 elementUI 登录页面实现回车提交登录的方法
前端·javascript·elementui