search

airyland / vux

Mobile UI Components based on Vue & WeUI
https://vux.li
MIT License
17.59k stars 3.71k forks source link

popup遮罩问题 #1114

Closed sixiakun closed 7 years ago

sixiakun commented 7 years ago

version vux@2.1.1-rc12

又来打扰。。问题是这样的 popup的遮罩层是在最外层body底部追加的，而popup遮罩层是在代码处添加的 我用了多层子路由，路由本身设置了z-index，弹出遮罩层z-index高于子路由的话，弹出内容层的z-index设置再高也是会被遮罩层遮挡 解决的话,我可以在首页调用这个组件，然后传个数据对象过去，在封装个组件调用，但感觉数据传递比较烦，确认时还要再传递，想问下这个问题 大牛觉得如何做是好 感觉我的项目做得有点差，为了解决回退时的滚动保留等问题，用了各种子路由来实现返回。。

airyland commented 7 years ago

不是很明白你的问题，你的内容在遮罩下面不是正常的么。 如果是希望 popup 也在 body 下，VUX 内置了 v-transfer-dom 指令，可以移动任何组件到body下面。

https://github.com/airyland/vux/blob/v2/src/demos/XDialog.vue#L10

sixiakun commented 7 years ago

。。不是我的内容 是我写在弹出框里面的内容被遮盖了 你的组件明明都是position:fixed，是相对于body的，放到我的子路由中，不知道为什么还是会被子路由的z-index影响，也就是遮罩层出来 会把我的整个子路由包含加入的弹出框内容给遮盖，我试试你给的这个能用不

sixiakun commented 7 years ago

加了这个v-transfer-dom 指令，并没有反应。。是我在子路由中使用的原因么

airyland commented 7 years ago

你确定你正确 import 了么。建议给个简单可以重现的代码。

sixiakun commented 7 years ago

sorry transform没有引，无视我

sixiakun commented 7 years ago

我的问题完美解决了 image 原来是这样的，我的弹出层写在router里面，这个z-index 是低于遮罩层的，导致我设置弹出的内容的z-index无效，还是会被遮挡，就是我弹出框内容都在遮罩下面，如图： image 现在把它移出来，问题就解决了，还有这么赞的指令，厉害！

airyland commented 7 years ago

不客气，相应文档还需要写下。