vue.js - (Vue.js) 在模态中滚动也会滚动到模态的后面
问题描述
单击图像会弹出一个长的滚动模式。问题是,如果您在模态中滚动也会滚动模态的背面。你如何解决它?
模态是一个组件。这是我的代码:
轮播.vue
<template>
<div>
<div v-for="(item, index) in photos" :key="index">
<div @click="imgClick(item)" style="cursor:pointer;">
<img :src="item.thumbnail" />
</div>
<Modal v-if='item.show' @close="item.show = false">
<div slot='body'>
<img :src="item.thumbnail" :class="`img-index--${index}`"/>
</div>
</Modal>
</div>
</div>
</template>
<script>
import Modal from './Modal.vue'
export default {
props: {
items: { type: Array, default: () => [] }
},
data() {
return {
photos: {}
}
},
created() {
this.photos = this.items.map(item => {
return { ...item, show: false }
})
},
methods: {
imgClick(item) {
item.show = true
}
},
components: {
Modal: Modal
}
}
</script>
解决方案
大多数模态包通过在打开模态时将类应用于<body>
标记来解决此问题。例如,<body class="modal-open">
。然后在您的应用程序的 CSS 中,您可以添加以下规则:
body.modal-open {
overflow: hidden;
}
这将使模式后面的页面不再可滚动。
无论您使用哪个模态包,都可能在模态打开或关闭时触发事件。您可以将此类应用于事件处理程序中的<body>
标记,并从事件处理程序中的标记中open
删除该类。<body>
close
更新
根据您添加的代码,您可以通过以下方式切换标签modal-open
上的类:<body>
...
<div @click="showModal(item)" style="cursor:pointer;">
<img :src="item.thumbnail" />
</div>
<Modal v-if='item.show' @close="hideModal(item)">
<div slot='body'>
<img :src="item.thumbnail" :class="`img-index--${index}`"/>
</div>
</Modal>
...
{
...
methods: {
showModal(item) {
item.show = true
document.body.classList.add("modal-open");
},
hideModal(item) {
item.show = false;
document.body.classList.remove("modal-open");
}
},
...
}
请参阅此jsFiddle以供参考。
推荐阅读
- javascript - 我想从 Firebase 获取文档数据
- javascript - Jquery 在尝试使用 onmousedown 通过其 id 拉取元素时返回 undefined
- linux - 某些网站仅在 Linux 上的 Firefox 中返回禁止响应(尽管将用户代理更改为 Chrome 有效);常见的原因?
- javascript - 在 ajax 中调用外部 url 并打印它的响应
- c# - 图表 COUNT 查询 C#?
- python - 结合sparse和einsum进行大稀疏求和
- javascript - Mongoose 收到错误:MissingSchemaError: Schema has not been registered for model
- python-3.x - 将 Conv1D 添加到 CNN 模型定义时语法无效
- javascript - Javascript:如何检查井字游戏中所有框/单元格的获胜状态?
- xamarin - 在 CopyingFile 部署到真正的 iPhone 变得非常缓慢