极客观点
项目管理
HarmonyOS
单击图像会弹出一个长长的滚动模式。问题是，如果您在模态中滚动，也会滚动模态的背面。你是怎么解决的？
模态是一个组件。这是我的代码：
轮播.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>
原文由 ddon 发布，翻译遵循 CC BY-SA 4.0 许可协议
大多数模式包通过在打开模式时将类应用于
<body>标记来解决此问题。例如，<body class="modal-open">。然后在您应用程序的 CSS 中，您可以添加此规则：这将使模式后面的页面不再可滚动。
无论您使用哪个模态包，都可能在模态打开或关闭时触发事件。 You can apply this class to the
<body>tag in theopenevent handler, and remove the class from the<body>tag in theclose事件处理程序。更新
根据您添加的代码，您可以通过以下方式在
<body>标签上切换modal-open类：请参阅此 jsFiddle 以供参考。