vue.js - 单击外部时从父组件关闭 v-navigation-drawer

Question

我有一个导航抽屉，它是它自己的组件。通过传递一个指定为 v-navigation-drawer 的 v-model 的 prop，从父组件控制可见性的切换。然后我发出一个事件表单子项来更新父项的道具。这很好用。但是，从外部单击时，导航抽屉不会关闭。我想出了下面的解决方案，在外部点击时手动关闭导航抽屉。我添加了一个条件，以便它仅在目标是覆盖时才响应。有没有更好的方法来处理这个问题，以便在仅单击覆盖层而不是父级的其他元素时关闭导航抽屉？

//DrawerComponent.vue

  <v-navigation-drawer
      v-model="isDrawerShowing"
      temporary
      fixed
      :width=width
      :height="height"
      right
      stateless
      v-click-outside="hideDrawer"
  ></v-navigation-drawer>

  hideDrawer(e) {
      if(e.target.className === "v-overlay__scrim") {
        this.$emit('hide-drawer',false);
      }
    }

标签： vue.js