效果图：
web-view is a container that hosts web pages. It will automatically fill the entire mini program page, and personal mini programs are not supported for the time being.
再看下面一个提示：
Each page can only have one web-view, and the web-view will automatically cover the entire page and cover other components.
In other words, if you use web-view to open a web page in a mini program, other components written on the page will be directly covered by the web page.
Requirement: Add a pop-up window to the web-view page
There happens to be a component cover-view that can cover web-view
cover-view is a text view that covers the native component.
App-vue and mini program framework, the rendering engine is webview. However, in order to optimize the experience, some components such as map, video, textarea, and canvas are implemented through native controls. The native component level is higher than the front-end component (similar to the flash level being higher than div). In order to cover native components normally, cover-view is designed.
cover-view function description:
Native components that can be covered include map, video, canvas, camera, live-player, live-pusher, and web-view
cover-view only supports nested cover-view and cover-image, and button can be used in cover-view. The length unit of component attributes defaults to px, and the input unit (rpx/px) is supported starting from 2.4.0.
也就是在cover-view中只能使用cover-view、cover-image、button三个组件
Code example:
注意：checkbox按钮是图片代替的，因为不能使用checkbox组件
<template>
<view>
<web-view :src="url">
<cover-view class="my-cover" v-if="coverIsShow">
<cover-view class="cover-box">
<cover-view class="des">
<cover-view class="des-text1">本服务将由{
{
corporateName}}提供，南洋商业银行（中国）将在您办理以下业务时将您的对应信息提供给该公司用于下述目的：</cover-view>
<cover-view class="des-text">购买商品</cover-view>
<cover-view class="des-text">手机号码：用于识别客户及查询订单</cover-view>
<cover-view class="des-text1">{
{
corporateName}}服务热线{
{
phoneNum}}，相关商品和服务（包括售后）均由该公司负责。</cover-view>
</cover-view>
<cover-view class="nav-select">
<cover-view class="select-item" @click="checkBoxBtn">
<cover-image @click="checkAllGouBox" class="image" src="@/static/applyAccont/check.png" v-if="chackBoxIsShow"></cover-image>
<cover-image @click="checkAllGouBox" class="image" src="@/static/applyAccont/uncheck.png" v-else></cover-image>
<cover-view>我已阅读并同意</cover-view>
</cover-view>
<cover-view class="nav-privacy" @click="userPrivacy">《用户协议》</cover-view>
<cover-view>和</cover-view>
<cover-view class="nav-privacy" @click="agreePrivacy">《隐私协议》</cover-view>
</cover-view>
<cover-view class="btns">
<button class="reject" @click="goBack">不同意授权</button>
<button type="primary" class="agree" @click="confirm">已知悉，同意授权</button>
<!-- <button type="primary" class="agree" @click="confirm" :disabled="!chackBoxIsShow">已知悉，同意授权</button> -->
</cover-view>
</cover-view>
</cover-view>
</web-view>
</view>
</template>
<script>
import apiUrl from '@/utils/commonUrl.js';
export default {
data() {
return {
url: '',
corporateName:'上海xxx科技有限公司',
phoneNum: '999999999',
coverIsShow: false,
chackBoxIsShow: false,
};
},
onLoad() {
this.url = apiUrl.baseUrl+ "&t=" + new Date().getTime()
},
methods: {
},
// 复选框点击
checkBoxBtn(){
this.chackBoxIsShow = !this.chackBoxIsShow;
},
// 取消返回
goBack(){
uni.navigateBack({
delta:1
})
},
// 确认协议
confirm(){
this.$store.commit('SET_BEILIANPROVICY', '1');
this.coverIsShow = false
},
// 用户协议
userPrivacy(){
uni.navigateTo({
url:'/pages/home/beiLiAnUser'
})
},
// 隐私协议
agreePrivacy(){
uni.navigateTo({
url:'/pages/home/beiLiAnPrivacy'
})
}
}
}
</script>
<style lang="scss">
.my-cover{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background-color: rgba(0,0,0,.3);
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
.cover-box{
width: 636rpx;
box-sizing: border-box;
background: #fff;
border-radius: 16rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.des {
font-size: 26rpx;
margin-top: 40rpx;
width: 560rpx;
.des-text{
width: 560rpx;
color: #666;
line-height: 48rpx;
white-space: pre-wrap;
text-indent: 2em;
word-break:break-all;
}
.des-text1{
width: 560rpx;
white-space:pre-wrap;
line-height: 48rpx;
color: #333;
font-weight: bold;
text-indent: 2em;
word-break:break-all;
}
}
.nav-select{
margin-top: 28rpx;
margin-left: 10rpx;
margin-right: 10rpx;
font-size: 26rpx;
display: flex;
.select-item{
display: flex;
.image {
width: 30rpx;
height: 30rpx;
margin-right: 20rpx;
}
}
.nav-privacy{
color: #1989FF;
}
}
.btns {
margin-top: 32rpx;
margin-bottom: 0;
display: flex;
.reject {
color: #333;
font-size: 28rpx;
background: #fff;
height: 100rpx;
line-height: 100rpx;
font-weight: 500;
width: 320rpx;
border-top: 2rpx solid #eee;
}
.agree {
color: #1989ff;
font-size: 28rpx;
background: #fff;
height: 100rpx;
line-height: 100rpx;
font-weight: 500;
width: 320rpx;
border-top: 2rpx solid #eee;
margin-left: -2rpx;
}
:deep(button[disabled][type=primary]) {
color: #8cc4fd !important;
border-radius: 0!important;
}
button {
border-radius: 0!important;
}
}
}
}
</style>