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);
},

Vuetify，如何关闭抽屉？

2 个答案: