问题:点击事件无法获取到
<div class="search-header" @click="testClick">
<div @click="goto('/search/1?distrctid='+ params.distrctid +'&floor='+ params.floor +'&building='+params.building+'&type=2')">
<div class="search-input">
<input type="text" placeholder="输入订单号、手机号、患者或护理员" @click="showinput"> <span>搜索</span>
</div>
</div>
<span slot="right" @click="showScreen" class="fillter">筛选</span>
</div>
解决方法:查看css样式 是否使用的定位和z-index。因为这些样式会影响到流式布局导致页面被遮罩。无法进行点击。
先来看一下问题出现的原因吧!!!
.ordertoass_page{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #f0f0f0;
z-index: 202;
}
.newwprder .ordertoass{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-y: auto;
.navBar{
position: fixed;
left: 0;
// top: 106px;
top: 0px;
width: 100%;
z-index: 100;
}
.search-header{
// position: fixed;
// left: 0;
// top: 106px;
// top: 46px;
display: flex;
justify-content: space-between;
padding: .2rem .6rem;
margin-top: 50px;
// position: relative; //加了这两行代码就可以啦
// z-index: 100;
}
页面中尽量不使用定位,因为影响布局。如果是定位的情况下可能会形成遮罩层导致事件无法点击,因此在开发中大家尽量还是少用定位哦