- 现象描述:当我显示弹窗时,手指放入弹框的区域 移动时, 会出现滑动模块与阴影背景色错位,从而产生bug。
![在这里插入图片描述](https://img-blog.csdnimg.cn/aca70c7213344763b036b95862fef46e.png)
- 使用 inobounce插件 解决,下载插件
npm install inobounce -s
- 实际代码
<template>
<div class="approval-process" v-if="visible">
...
</div>
</template>
<script lang="ts">
import inobounce from 'inobounce'
import {watch,onMounted,onBeforeUnmount} from 'vue'
export default {
setup(props,context){
watch(() =>
props.visible, (newVal, oldVal) => {
if(newVal) {
let u = navigator.userAgent
if (u.indexOf('iPhone') > -1) {
inobounce.enable()
console.log('启动弹框时禁用')
}
} else {
inobounce.disable()
console.log('关闭弹框时释放')
}
},
{immediate:true,deep:true}
)
onBeforeUnmount(()=>{
inobounce.disable()
console.log('vue生命周期卸载之前,释放滚动条')
})
},
props: {
visible:{
type: Boolean,
default:true
}
}
</script>
- 参考文章
iOS手机滑动回弹bug