<div v-if="inputPopShow">
<div class="inputPop" @click="close($event)">
<div class="input-main">
<div class="search">
<input
type="text"
v-model="companyName"
class="input"
placeholder="您可以搜索新的企业进行对比"
@input="companyNameChange"
@keyup.enter="keySearch"
@blur="onblurMsg('companyName')"
/>
<div class="cancel" @click="cancel">取消</div>
</div>
<div class="c-box" ref="layoutBox" @touchmove="touchMove" @touchstart="touchStart" id="c-box">
<div
v-for="(item, index) in associationalWord"
:key="index"
class="formItem_select_item"
@click="selectItem(item)"
>
<div v-html="item.keyCompanyName"></div>
</div>
<!-- <div style="height:1rem;"></div> -->
</div>
</div>
</div>
</div>
c-box是弹窗内的可滑动区域 inputPop 是整个黑色背景
watch: {
inputPopShow: {
handler(newVal, old) {
if (newVal) {
this.$nextTick(() => {
document.body.addEventListener('touchmove', this.stopTouch, {
passive: false,
capture: true
})
})
} else {
document.body.removeEventListener('touchmove', this.stopTouch, {
capture: true
})
}
},
immediate: true
}
},
stopTouch(e) {
let ele = e.target.closest('.c-box')
if (ele) return
e.preventDefault()
},
touchStart(e) {
this.firstY = e.targetTouches[0].clientY
},
touchMove(e) {
let target = document.getElementById('c-box')
let offsetHeight = target.offsetHeight,
scrollHeight = target.scrollHeight
let changedTouches = e.changedTouches
let scrollTop = target.scrollTop
if (changedTouches.length > 0) {
let touch = changedTouches[0] || {}
let moveY = touch.clientY
if (moveY > this.firstY && scrollTop === 0) {
// 滑动到弹窗顶部临界条件
e.preventDefault()
return false
} else if (moveY < this.firstY && scrollTop + offsetHeight >= scrollHeight) {
// 滑动到底部临界条件
e.preventDefault()
return false
}
}
},