时间戳

首页 > 解决方案 > 使用固定的关闭按钮创建可滚动的 v-overlay

javascript - 使用固定的关闭按钮创建可滚动的 v-overlay

问题描述

我可能会滥用v-overlay的用途。我在https://codepen.io/james-hudson3010/pen/MWyjNvj有一个 CodePen，它说明了我想要实现的目标。我想要使​​用叠加层的目的是提供一些应用程序内容的可打印视图，并根据需要应用d-print-none。由于此内容将高于视口，因此叠加层需要可滚动。我还希望关闭按钮固定在视口的左上角。

目前，没有什么能按我的意愿工作。什么不工作是：

  1. 我看到的第一个项目文本是 488，而不是 1。我无法向上滚动。

  2. 关闭按钮不出现。在调试工具中检查元素告诉我display: fixed是一个无效的属性值。

  3. 向下滚动时，最终会再次出现“显示叠加”按钮。

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>

标签： javascripthtmlcssprintingvuetify.js

解决方案

推荐阅读