滑盖：一旦新的滑盖处于活动状态，自动关闭所有滑盖

问题描述

我想实现一个像这样的幻灯片：https://tailwindui.com/components/application-ui/overlays/slide-overs

这个例子工作正常，但现在我想决定如何显示和隐藏幻灯片。

当然我可以像这样使用按钮：

x = [1 2 3; 3 4 5]

就我而言，我必须使用多个幻灯片，并且必须确保同时只有一个幻灯片处于活动状态。

假设我得到了这个：

<button @click="open = !open">toggle</button>

<TransitionRoot as="template" :show="open">
   ...
</TransitionRoot>

所有幻灯片都可以同时处于活动状态。当然，我可以通过执行类似 <button @click="open = !open">toggle 1</button> <button @click="open2 = !open">toggle 2</button> <button @click="open3 = !open">toggle 3</button> <TransitionRoot as="template" :show="open"> ... </TransitionRoot> <TransitionRoot as="template" :show="open2"> ... </TransitionRoot> <TransitionRoot as="template" :show="open3"> ... </TransitionRoot> 之类的操作来创建一个处理此问题的方法，但在我的情况下，我需要此状态是全局的，因此所有视图都会“知道”此时哪个滑动处于活动状态。 ..

在 vuejs2 时代，我会使用 vuex 来存档。但我不确定，如果这是 vuejs3 的方式。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）