vux

在页面中有一个功能点#xff0c;就是点选择公司列表的时候#xff0c;会…最近在维护一个H5老项目时遇到一个问题就是在ios上z-index不起作用在安卓上样式都是好的。

vux

在页面中有一个功能点就是点选择公司列表的时候会出现这个页面上面浮现一个a弹框页面这个a弹框页面里面有搜索框可以输入公司名进行搜索然后出现公司列表点击其中的一个公司就算进行选择了。

主要是基于vux这个UI组件库的特性造成了这个问题基础代码如下

templatediv

classcompanyListpopup/popup/div/div

/templatescript

/script打包之后在页面上运行之后会发现在页面中的页面布局如下

!DOCTYPE

vux-popup-content-showdiv公司列表/div/div/div/div/div!--

--div

/html会发现蒙层在body元素中而显示的弹窗列表在另外的很深的html中不在一个层级中。

.vux-popup-content{z-index:501;

首先在html中vux-popup-mask和vux-popup-content不在一个层级中不知道是不是因为这个原因。

那我怎么解决的呢

方法1transform

teleportbody/van-popup我借鉴了第二种方法

代码如下

v-transfer-dompopup/popup/div/div

/templatescript

{directives:{TransferDom},components:

{Popup,},

/script通过v-transfer-dom可以把内容元素vux-popup-content移动到紧挨着body元素下面这样就可以和vux-popup-mask处于一个层级里面

!DOCTYPE

classselect-alldiv.../div/div!--

弹窗内容区

vux-popup-content-showdiv公司列表/div/div/div/div!--

--div

/html可以看到元素已经移到了外面所以这个时候设置的z-index:

501