uni-app nvue 界面元素绑定的事件点击无效 发生v-if或是其他交互后事件全部失效点击没有反应

uni-app nvue 界面元素绑定的事件点击无效 发生v-if或是其他交互后事件全部失效点击没有反应

产品分类：uniapp/App

PC开发环境操作系统：Mac

HBuilderX类型：正式

HBuilderX版本号：4.66

手机系统：Android

手机系统版本号：Android 11

手机厂商：华为

手机机型：荣耀play

页面类型：nvue

vue版本：vue2

打包方式：云端

示例代码：

总共三个nvue文件：
c-list.nvue
c-modal.nvue
map.nvue

<template>  
    <view class="map-container">  
        <view style="flex:1;background:blue;"></view>  
        <!-- 真机再用map替换显示 不然模拟器很卡容易异常死机-->  
        <!-- <map style="flex:1"></map> -->  
    </view>  

    <!-- 全屏覆盖层 -->  
    <cover-view class="cover-view1">  
        <view class="view1">  
            <view class="btns" v-if="isShowBtns">  
                <view class="btn" >  
                    <text class="btn" @click="tab(1)" :class="{'active1': activeIndex === 1}">普通</text>  
                </view>  
                <view class="btn" @click="tab(2)">  
                    <text class="btn" :class="{'active2': activeIndex === 2}">卫星</text>  
                </view>  
            </view>  

            <view class="add-marker" v-else>  
                <text class="save-btn" @click="save()">保存</text>  
                <image class="marker" src="../../static/images/location.png"></image>  
            </view>  
        </view>  

        <view class="view2">  
            <image class="image" src="../../static/images/location.png" @click="getLocation()"></image>  
            <view class="camera-list" @click="openList1()">  
                <text class="camera-text">相机列表</text>  
            </view>  
        </view>  

        <view>  
            <c-model ref="model1" :dataList="dataList1" @clickItem="openList2"></c-model>  
            <c-model ref="model2" :dataList="dataList2" :isItemCloseModal="false"></c-model>  
        </view>  
    </cover-view>  
</template>  
<style lang="scss">  
$border: 1px solid transparent;  
$btnRedius: 40rpx;  

.map-container{  
    flex: 1;  
    border: $border;  
}  

.cover-view1{  
    position: absolute;  
    top: 50px;  
    left: 0;  
    right: 0;  
    bottom: 100rpx;  
    border: $border;  
    display: flex;  
    flex-direction: column;  
    justify-content: space-between;  
}  

.view1{  
    border: $border;  
    height: 200px;  
    pointer-events: none; /* 允许点击穿透到下层 */  
}  
.btns {  
    display: flex;  
    flex-direction: row;  
    margin: 10px;  
    border-radius: $btnRedius;  
    background: #ccc;  
}  
.btn{  
    flex: 1;  
    height: 40px;  
    line-height: 40px;  
    text-align: center;  
    color: #fff;  
    font-size: 15px;  
    font-weight: bold;  
    border: $border;  
}  
.active1{  
    background: green;  
    border-top-left-radius: $btnRedius;  
    border-bottom-left-radius: $btnRedius;  
}  
.active2{  
    background: green;  
    border-top-right-radius: $btnRedius;  
    border-bottom-right-radius: $btnRedius;  
}  

.view2{  
    // flex: 1 等价于 100%，默认是column方向的100%;   
    // 可以通过改变方向row; 还有width:750rpx也是100%意思  
    height: 350rpx;  
    width: 750rpx;  
    border: $border;  
    pointer-events: auto; /* 子元素恢复点击 */  
}  
.image{  
    position: absolute;  
    width: 40px;  
    height: 40px;  
    bottom: 250rpx;  
    left: 20rpx;  
}  
.camera-list{  
    position: absolute;  
    left: 0;  
    right: 0;  
    bottom: 0;  
    padding: 10px;  
    background: rgba(0,0,0,0.3);  
}  
.camera-text{  
    color: #fff;  
}  

.add-marker{  
    flex: 1;  
    display: flex;   
    align-items: center;   
    height: 200rpx;  
}  
.save-btn{  
    position: absolute;  
    top: 10px;  
    right: 10px;  
    width: 100px;  
    height: 40px;  
    line-height: 40px;  
    text-align: center;  
    background: green;  
    color: #fff;  
}  
.marker{  
    width: 40px;  
    height: 40px;  
    top: 100px;  
}  
</style>

<template>  
  <view class="container">  
    <!-- 遮罩层（重新启用并优化） -->  
    <!-- <view   
      v-if="isShowModal && showModal"   
      class="mask"   
      @click="closeModal"  
      :style="{opacity: maskOpacity}"  
    ></view> -->  

    <!-- 弹窗内容 -->  
    <view v-if="showModal">  
      <view   
        class="modal"   
        ref="animElement"   
        :style="{height: actualMaxHeight}"  
      >  
        <view class="modal-content">  
          <!-- 弹窗头部 -->  
          <view class="modal-header">  
            <view class="modal-title">  
              <text class="title" v-if="title">{{title}}</text>  
            </view>  
            <view class="close-wrapper" @click="closeModal">  
              <image  
                class="close"   
                src="../../static/images/close.png"   
              ></image>  
            </view>  
          </view>  

          <!-- 可滚动内容区域 -->  
          <scroll-view class="scroll-list" scroll-y>  
            <c-list :dataList="dataList" @clickItem="clickItem"></c-list>  
          </scroll-view>  
        </view>  
      </view>  
    </view>  
  </view>  
</template>

<template>  
  <scroll-view class="scroll-view" scroll-y="true">  
    <recycle-list   
      for="(item, i) in longList"  
      key-field="id"  
      style="width: 750rpx;"  
    >  
      <cell-slot scope="item">  
        <view class="item" @click="handleItemClick(item)">  
          <text class="item-text">{{item.name}}</text>  
          <text class="item-image">{{item.isChecked ? '✅' : '未选中'}}</text>  
        </view>  
      </cell-slot>  
    </recycle-list>  
  </scroll-view>  
</template>