如何阻止vuetify v-bottom-sheet或(v-dialog)阻止与主要内容交互

Question

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

但是播放列表和其他控件在主页中。但问题是，这些元素被“屏蔽”或停用或其他什么，没有办法与他们互动。就像在这个例子中一样。

输入元素停止工作，只有抓住边上的滚动条才能在主页上滚动。然而，@clicks仍然是注册的，滚动到其他一些组件上也是有效的。

我想我已经尝试了文档中的所有API设置和组合，比如将其附加到不同的dom元素、hide-overlay和persistent，但似乎都不起作用。同样的原则似乎也适用于其他专注于广告化的对话框。

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

有没有人对此有经验或了解解决方法？非常感谢！

Answer 1

这是有意的行为。您最好的选择是结合使用hide-overlay和persistent

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