如何解决使用固定的关闭按钮创建可滚动的v叠加层
我可能滥用 v-overlay 的用途。我在https://codepen.io/james-hudson3010/pen/MWyjNvj有一个CodePen,它说明了我要实现的目标。我要使用覆盖层的目的是提供一些应用程序内容的可打印视图,并根据需要应用 d-print-none 。由于此内容将比视口高,因此叠加层需要可滚动。我还希望将关闭按钮固定在视口的左上角。
目前,没有任何事情如我所愿。不起作用的是:
-
我看到的第一个 Item 文本是488,而不是1。我无法向上滚动。
-
关闭按钮不出现。在调试工具中检出该元素会告诉我 display:fixed 是无效的属性值。
-
向下滚动时,最终会再次显示 Show Overlay 按钮。
JavaScript:
new Vue({
el: '#app',vuetify: new Vuetify(),data: () => ({
overlay: false
}),})
CSS:
.hide-button {
display: fixed;
top: 16px;
left: 16px;
}
HTML:
<div id="app">
<v-app id="inspire">
<v-btn text @click="overlay = !overlay">Show Overlay</v-btn>
<v-overlay opacity="1" light color="white" :value="overlay" style="overflow: scroll">
<v-btn class="hide-button" color="primary" @click="overlay = false">
Hide Overlay
</v-btn>
<div v-for="x in 1000" style="color: black">Item {{x}}<br></div>
</v-overlay>
</v-app>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。