web-view组件在App和小程序中层级较高，如需要在vue页面中写代码为web-view组件覆盖内容，小程序端无解，只能由web-view的组件自己弹出div。

App端有如下若干方案：

1.比较简单的方式是actionsheet等原生弹出菜单（小程序也可以使用此方案）
2.使用plus.nativeObj.view。这里有一个底部图标菜单的示例，可参考https://ext.dcloud.net.cn/plugin?id=69
3.使用原生子窗体subNvue
4.可以在web-view组件内嵌的网页中弹出z-index更高的div。如果是外部网页，可以在vue中获得子webview对象后，通过evalJS为这个子webview注入一段js，操作其弹出div层。

下面只说 subNvue 方式

首先在 pages.json 文件中配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
{
  "pages": [
    {
      "path": "pages/detail/detail", // 在哪个页面弹窗
      "style": {
        "navigationBarTitleText": "",
        "app-plus": {
          "titleNView": false, //
          "subNVues": [
            {
              "id": "popup", // 唯一标识
              "type": "popup", // subNVue窗体类型，弹出(popup)和导航(navigationBar)。
              "path": "pages/wv-modal/wv-modal", // subNVue 的路径
              "style": { // 配置subNVue的位置，背景等样式属性。
                "margin":"auto",
                "width": "300px",
                "height": "70%",
                // subNVue无法设置圆角等样式，背景background设置为transparent，
                // 然后可以给页面中view标签设置圆角等subNvuew无法实现的样式
                "background": "transparent",
                "mask": "rgba(0,0,0,0.5)",
                "zindex": 9
              }
            }
          ]
        }
      }

    },
  ]
}

在onLoad方法中获取subNvue的实例

在pages/detail/detail中

1
2
3
4
5
6
7
8
9
10
11
12
methods: {
  showPopup() {
    onst subNvue=uni.getSubNVueById('popup'); // 获取subNvue实例
    subNvue.show(); // 显示
  }
  }
},
onLoad() {
  onst subNvue=uni.getSubNVueById('popup'); // 获取subNvue实例
  subNvue.hide(); // 隐藏，之后可通过点击某个按钮 显示
}

结果图

xuehuayu.cn