vue3+ts禁止屏幕滚动
时间: 2023-05-17 18:04:36 浏览: 229
可以通过以下代码实现:
```typescript
import { onMounted, onBeforeUnmount } from 'vue'
export default {
setup() {
const disableScroll = () => {
document.body.style.overflow = 'hidden'
}
const enableScroll = () => {
document.body.style.overflow = ''
}
onMounted(() => {
disableScroll()
})
onBeforeUnmount(() => {
enableScroll()
})
}
}
```
这段代码使用了 Vue 3 的 Composition API,通过在组件的 `setup` 函数中使用 `onMounted` 和 `onBeforeUnmount` 钩子函数来禁止和启用屏幕滚动。具体来说,当组件挂载时,会调用 `disableScroll` 函数来禁止屏幕滚动,当组件卸载时,会调用 `enableScroll` 函数来启用屏幕滚动。
相关问题
vue3+ts通过点击事件禁止屏幕滚动
可以通过以下代码实现:
```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` 钩子来分别在组件挂载和卸载时添加和移除事件监听器。在点击事件的处理逻辑中,我们先禁止屏幕滚动,然后执行其他操作,最后再启用屏幕滚动。
vue+ts禁用屏幕滚动
你可以通过以下代码禁用屏幕滚动:
```typescript
// 在 Vue 组件中
export default {
mounted() {
document.body.style.overflow = 'hidden';
},
beforeDestroy() {
document.body.style.overflow = '';
}
}
```
这将在组件挂载时禁用屏幕滚动,并在组件销毁时恢复原始设置。