阿修罗
阿修罗
  • 发布:2021-11-27 13:42
  • 更新:2023-12-15 11:30
  • 阅读:729

Nvue subNuve 子窗体点击 时,会关闭子窗体

分类:nvue

环境 Nvue

页面载入子窗体(subNuve)后,如果没有按钮、表单、事件;
则点击 子窗体区域时,会退出本子窗体

图片红底的,子窗体没有使用事件,点击 屏幕任意区域都会退出
黑底的,子窗体有 @click 事件,点击 不会退出,其它任何地方都会退出

子窗体设置
"navigationBarTitleText": "设置",
"enablePullDownRefresh": false,
"app-plus": {
"subNVues":[{
"id": "upgrade_cog", // 唯一标识
"path": "pages/subNVues/upgrade", // 页面路径
"type": "popup", //这里不需要
"style": {
"position": "absolute",
"width": "280px",
"height": "350px",
"margin":"auto",
"background": "transparent"
}
},{
"id": "pass_edit", // 唯一标识
"path": "pages/subNVues/user-pass", // 页面路径
"type": "popup", //这里不需要
"style": {
"position": "absolute",
"width": "280px",
"height": "350px",
"margin":"auto",
"mask":"rgba(255,0,0,0.5)",
"background": "transparent"
}
}]
}

调用代码
goPass:function(){
//#ifdef APP
const subNVue = uni.getSubNVueById('pass_edit')
subNVue.show('zoom-fade-out');
//#endif
},
goVersion:function(){
//#ifdef APP
var version = plus.runtime.version;
if( version.toString() == this.AppBase.version.ver ){
uni.showToast({title: '当前已是最新版本',mask: true,icon: 'none'});
}else{
const subNVue = uni.getSubNVueById('upgrade_cog')
subNVue.show('zoom-fade-out');
}
//#endif
},

子窗体代码
<template>
<view class="sub-pass-edit">

    <text class="sub-pass-top">密码更新</text>  

    <view class="sub-for">  
        <text class="sub-for-text">原始密码</text>  
        <input class="for-input" name="password" value="" password="true" placeholder="原始密码" />  
    </view>  

</view>  

</template>

<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>

<style>
.sub-pass-edit{
background:#fff;border-radius:9px;
}
.sub-pass-top{
padding:10px 15px;
border-top-left-radius:9px;border-top-right-radius:9px;
background:#f6f6f6;border-bottom:1px solid #eee;
font-size:16px;color:#666;
}

.user-signature-textarea{
padding:15px;height:200px;
font-size:16px;color:#666;line-height:35px;
}

.sub-for{
flex-direction:row;align-items:center;justify-content: space-between;
padding:15px;border-bottom:1px solid #eee;
}
.sub-for-text{
flex:1;
}

.for-input{

}
</style>

2021-11-27 13:42 负责人:无 分享
已邀请:
3***@qq.com

3***@qq.com

解决了吗?

  • 栉风

    解决了吗

    2023-10-26 09:50

栉风

栉风 - 前端开发

解决了吗

canmm

canmm

把"background": "transparent" 改成"background":"rgba(0, 0, 0, 0)"

要回复问题请先登录注册