Vuetify，如何关闭抽屉？答案

【问题标题】：Vuetify, how to close drawer?Vuetify，如何关闭抽屉？
【发布时间】：2018-07-08 10:01:15
【问题描述】：

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

我尝试过类似@click.stop="(this.router.path != '/' ? this.router.push('/') : drawer = !drawer)" 的操作，Vue 没有报告任何错误，代码也不起作用。

我哪里错了？

【问题讨论】：

代码的模板部分没有this。
那么，那该怎么办呢？我实际上在主 vue 应用程序中制作了该方法，但问题仍然与我接壤。 this.router.push 有效 this.router.path 无效。

标签： vue.js vue-router vuetify.js

【解决方案1】：

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

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

【讨论】：

我的句子是布尔值，问题在第一部分，this.router.path 返回空字符串，所以句子总是为真，而抽屉=！抽屉从未发生过。

【解决方案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);
},

【讨论】：