取证，如何关闭抽屉？

Question

我已经将导航添加到抽屉中，除了链接与页面相同的情况外，一切工作正常。点击链接后，抽屉保持打开状态，访问者并不清楚该页面是否为当前页面。

我试过这样做，@click.stop="(this.router.path != '/' ? this.router.push('/') : drawer = !drawer)" Vue没有显示出任何错误，代码也不能工作。

我哪里错了？

Answer 1

drawer数据键正在寻找一个布尔值，如果它是真的，导航抽屉就会显示出来。因此，您可以将@click="drawer = false"添加到您的菜单链接中，当单击任何链接时，它将关闭绘图。

文档中的示例：https://vuetifyjs.com/components/navigation-drawers#example-6

Answer 2

我通过将应用程序中的抽屉设置为使用它的路由的子项来处理此问题。isOpen属性在父级中进行管理。我将isOpen作为一个道具传递给抽屉，并根据需要发出打开和关闭事件。

哦，我还发现为了确保打开/关闭动画正常工作，超时是必要的。有人请让我知道，如果你找到了更好的方式来处理动画，因为这感觉有点摇摇欲坠。

我处理其他一些事情，比如右/左对齐和返回路线，但如果没有帮助，就忽略它的噪音。

下面是一个装入组件的父组件

<my-drawer
  :iconName="'my_icon'"
  :isOpen="drawerIsOpen"
  :justify="'right'"
  :returnRoute="'home'"
  @close="drawerIsOpen = false"
  @open="drawerIsOpen = true"
>
// ...
</my-drawer>

以下是抽屉组件中的方法：

data() {
  return {
    closeDelay: 500,
    width: 0,
  };
},
methods: {      
  closeBtnClick() {
    this.$emit('close');
    setTimeout(() => { this.$router.push(this.returnRoute); }, this.closeDelay);
  },

mounted() {
  setTimeout(() => { this.$emit('open'); }, this.closeDelay);
},