如何阻止 vuetify v-bottom-sheet 或（v-dialog）阻止与主要内容的交互答案

【问题标题】：how to stop vuetify v-bottom-sheet or (v-dialog) from blocking interaction with main content如何阻止 vuetify v-bottom-sheet 或（v-dialog）阻止与主要内容的交互
【发布时间】：2021-11-12 05:31:48
【问题描述】：

我们正在尝试在 Vue 页面上构建一个在底部播放器中播放的音乐播放界面，如下所述： https://vuetifyjs.com/en/components/bottom-sheets/#music-player

但播放列表和其他控件在主页中。但问题是这些元素被“阻止”或停用或其他东西，没有办法与它们交互。就像在这个例子中一样。

输入元素停止工作，只有抓住侧面的滚动条才能在主页上滚动。但是，@clicks 仍然被注册，并且在其他一些组件上滚动也可以工作。

我想我已经尝试了文档中的所有 API 设置和组合，例如将其附加到不同的 dom 元素或hide-overlay 和persistent，但似乎没有任何效果。同样的原则似乎也适用于其他关注 vuetify 的对话框。

https://vuetifyjs.com/en/api/v-bottom-sheet/

有没有人有这方面的经验或知道解决方法？将不胜感激！

【问题讨论】：

最好把代码给我们看看。因为我相信hide-overlay 和persistent 会成功。也许你需要检查 ‍‍<v-app> 和其他对这类事情有直接影响的主要标签。
我也遇到了同样的问题，您是否尝试使用v-bottom-navigation 完成此操作？

标签： vue.js dialog frontend vuetify.js bottom-sheet

【解决方案1】：

这是预期的行为。您最好的选择是 hide-overlay 与 persistent 结合使用

<v-bottom-sheet
  hide-overlay
  persistent
></v-bottom-sheet>

【讨论】：

嗨@tauzN，谢谢你的回答。我试过了，这些实际上是我的设置。我将在问题中对此进行扩展。虽然我理解这是预期的行为，但我仍然需要它来做其他事情，最好不要自己构建一个模仿它的新组件。
我建议您自己构建。
我最终做到了，使用 v-sheet。谢谢！