首先须要在pages.json中配置
{ "path": "pages/client/initiateElectronContract/index", "style": { "navigationBarTextStyle": "white", "navigationBarTitleText": "编辑电子合同", "navigationBarBackgroundColor": "#00bdbd", "backgroundColor": "#00bdbd", "navigationStyle": "custom", "app-plus": { "subNVues": [ { "id": "initiateContractShare", // 惟一标识 "type": "popup", "path": "pages/client/initiateElectronContract/subNVue/share", "style": { "position": "absolute", "bottom": "0", "left": "0", "right": "0", "width": "100%", "height": "200px" } }, { "id": "tips", "type": "popup", "path": "pages/client/initiateElectronContract/subNVue/popup" } ] } } },popup.nvue文件
<template> <view class="page"> <view class="shares"> <view class="title">开始签约</view> <view class="content"> <text class="tip">发动签约后，合同内容不能再次批改，同时会耗费一份合同的使用量，是否开始签约？</text> </view> <view class="operation"> <view class="cancel btn" @click="cancel"> <text class="txt canceltxt">勾销</text> </view> <view class="confirm btn" @click="confirm"> <text class="txt confirmtxt">确定</text> </view> </view> <view class="close" @click="cancel"> <image src="../../../../static/close.png" style="width: 20px;height: 20px;" alt="close" /> </view> </view> </view></template><script> export default { data() { return { }; }, created() { const vm = this; // 接管信息的页面 // uni.$on('from-parent', (data) => { // uni.showToast({ // title: data.type + ', ' + data.content // }) // switch (data.type) { // case '1': // break; // case '2': // break; // case '3': // break; // // .... // } // }); }, beforeDestroy() { // 页面销毁之前 移除监听器 // uni.$off('from-parent'); }, methods: { cancel() { // 获取以后 subNVues 原生子窗体的实例。 const subNVue = uni.getCurrentSubNVue(); // 子窗体暗藏 subNVue.hide(); }, confirm() { // 获取以后 subNVues 原生子窗体的实例。 const subNVue = uni.getCurrentSubNVue(); // 向父窗体传递参数 uni.$emit('to-parent', { type: '3', content: content }); // 子窗体暗藏 // 可自定义 暗藏动画成果，工夫 // subNVue.hide(); }, } }</script><style> /* 分享弹窗 */ .shares { height: 300px; font-size: 20upx!important; padding: 10px; } .title { width: 300px; display: flex; text-align: center; justify-content: center; } .tip { font-size: 16px; padding: 20px 0 10px; } .operation { display: flex; flex-direction: row; justify-content: center; align-items: center; } .btn { display: flex; justify-content: center; align-items: center; color: #606266; padding: 10px 30px; } .txt { display: flex; justify-content: center; align-items: center; font-size: 16px; } .close { position: absolute; top: 10px; right: 10px; }</style>index.vue文件
<template> <view class="initiateContract"> <view class="html-box"> <web-view :src="'../../../hybrid/html/viewContract/index.html?data=' + obj" ref="wv"></web-view> </view> <view class="footer"> <view class="box"> <view class="item"> <view class="btn"> <u-button type="primary" :key="1" :plain="true" text="保留合同"></u-button> </view> </view> <view class="item" @click="share"> <view class="btn"> <u-button type="primary" :key="2" text="分享预览"></u-button> </view> </view> <view class="item"> <view class="btn"> <u-button type="primary" :key="3" text="开始签约"></u-button> </view> </view> <view class="item"> <view class="btn"> <u-button :disabled="true" :key="4" type="success" text="签约中"></u-button> </view> </view> </view> </view> </view></template><script> export default { name: "electronContractEdit", data() { return { obj: null } }, onLoad() { const vm = this; // 接管信息的页面(子窗体向父窗体传递参数) uni.$on('to-parent', (data) => { switch( data.type ){ case '1': uni.setClipboardData({ data: this.shareImgInfo.result.tips, success: function () { console.log('success'); uni.showToast({ icon: 'none', title: '链接已复制' }) } }); break; case '2': console.log('分享到微信') break; } }); }, methods: { //形式一：关上id为initiateContractShare的nvue文件 share() { const subNVue = uni.getSubNVueById('initiateContractShare'); // 对应page.json的id // 向子窗体传递参数 // uni.$emit('from-parent',{ // type: '1', // content: '父给子参数1' // }) // 1:子窗体从顶部进入（动画成果）, 2:显示原生子窗体的动画持续时间 subNVue.show('slide-out-top', 300) }, //形式二：关上id为tips的nvue文件 openSubNVue() { const subNVue = uni.getSubNVueById('tips'); // 对应page.json的id // 向子窗体传递参数 // uni.$emit('from-parent',{ // type: '1', // content: '父给子参数1' // }) // 1:子窗体从顶部进入（动画成果）, 2:显示原生子窗体的动画持续时间 subNVue.setStyle({ //在js中设置款式 "position": "absolute", "width": "300px", "height": "180px", "margin": "auto", //居中 "color": "#000000", "background-color": "#FFFFFF", "border-top-left-radius": "15px", "border-top-right-radius": "15px" }) subNVue.show('slide-out-top', 300) }, }, beforeDestroy() { // 页面销毁之前 移除监听器 uni.$off('to-parent') }, }</script><style lang="scss" scoped> .initiateContract { .footer { position: fixed; bottom: 0px; left: 0px; right: 0px; z-index: 9999; padding: 10px 0 20px; background: #fff; border-top: 1px solid #f3f3f3; .box { display: flex; justify-content: space-around; align-items: center; .item { .btn { margin: 0 auto; } } } } }</style>这里设置nvue窗体地位的款式有两种形式，一种是在page.json中配置，另一种则是通过办法设置。