vue3+ts通过点击事件禁止屏幕滚动
时间: 2023-05-17 19:04:37 浏览: 282
可以通过以下代码实现:
```typescript
import { onMounted, onUnmounted } from 'vue'
function disableScroll() {
document.body.style.overflow = 'hidden'
}
function enableScroll() {
document.body.style.overflow = ''
}
export default {
setup() {
const handleClick = () => {
disableScroll()
// 这里是点击事件的处理逻辑
enableScroll()
}
onMounted(() => {
document.addEventListener('touchmove', disableScroll, { passive: false })
})
onUnmounted(() => {
document.removeEventListener('touchmove', disableScroll)
})
return {
handleClick,
}
},
}
```
在这个示例中,我们通过 `disableScroll` 和 `enableScroll` 函数来禁止和启用屏幕滚动。在 `setup` 函数中,我们使用 `onMounted` 和 `onUnmounted` 钩子来分别在组件挂载和卸载时添加和移除事件监听器。在点击事件的处理逻辑中,我们先禁止屏幕滚动,然后执行其他操作,最后再启用屏幕滚动。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![whl](https://img-home.csdnimg.cn/images/20210720083646.png)