如何制作导航抽屉以关闭具有选定项目的组并根据URL打开组

Posted 2021-05-06

我正在尝试使导航抽屉充当以下角色：

1. 当我舔一个v-list-item时，我希望它关闭所有打开的v-list-group
2. 当我重新加载页面时，我想重新打开v-list-group并突出显示与用户所在页面相关的v-list-item。当用户与v-list-item在同一页面上时，它确实起作用，但是当v-list-item在我的v-list-group中时，它不起作用。

我的导航抽屉：

<v-navigation-drawer v-model="drawer" bottom dense clipped app shapped>
  <v-list nav dense flat v-for="item in navigationDrawerItens" :key="item.title">
    <v-list-item
      v-if="item.items == undefined"
      :to="item.to"
      link
      active-class="primary--text text--primary-4"
      :click="item.click"
    >
      <v-list-item-icon>
        <v-icon>{{item.icon}}</v-icon>
      </v-list-item-icon>
      <v-list-item-title>{{item.title}}</v-list-item-title>
    </v-list-item>
    <v-list-group :prepend-icon="item.icon" no-action v-else>
      <template v-slot:activator>
        <v-list-item-content>
          <v-list-item-title v-text="item.title"></v-list-item-title>
        </v-list-item-content>
      </template>

      <v-list-item
        v-for="subItem in item.items"
        :key="subItem.title"
        :to="subItem.to"
        link
        active-class="primary--text text--primary-4"
      >
        <v-list-item-icon>
          <v-icon>{{subItem.icon}}</v-icon>
        </v-list-item-icon>
        <v-list-item-title>{{subItem.title}}</v-list-item-title>
      </v-list-item>
    </v-list-group>
  </v-list>
</v-navigation-drawer>

我的navigationDrawerItems：

private navigationDrawerItens = [
{
  title: 'Live',
  icon: 'videocam',
  click: this.getSettingsFromRest(),
  to: '/live'
},
{
  title: 'Settings',
  icon: 'build',
  click: this.getSettingsFromRest(),
  to: '/settings'
},
{
  title: 'About',
  icon: 'info',
  items: [{
    title: 'Contact us',
    to: '/contactus',
    icon: 'contact_support'
  }]
}

]

[我想说的是：如果我单击设置，然后单击与我们联系，我想关闭关于”组。如果我在“与我们联系”上并且刷新页面，我想打开“关于并突出显示与我们联系”组

答案

为上述功能添加了一些其他代码

在这里找到有效的代码笔：https://codepen.io/chansv/pen/QWWpYvK

<div id="app">
  <v-app id="inspire">
    <v-navigation-drawer :clipped="$vuetify.breakpoint.lgAndUp"
      app
    >
      <v-list dense>
        <template v-for="(item, ind) in items">
          <v-list-item
            v-if="!item.children"
            :key="item.text"
            @click="currentSelection = item.text"
            :class="currentSelection == item.text ? 'grey': ''"
          >
            <v-list-item-action>
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title>
                {{ item.text }}
              </v-list-item-title>
            </v-list-item-content>
          </v-list-item>
          <v-list-group
            v-if="item.children"
            :key="item.text"
            v-model="item.model"
            :prepend-icon="item.model ? item.icon : item['icon-alt']"
            append-icon=""

          >
            <template v-slot:activator>
              <v-list-item>
                <v-list-item-content>
                  <v-list-item-title>
                    {{ item.text }}
                  </v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </template>
            <v-list-item
              v-for="(child, i) in item.children"
              :key="i"
              @click="item.model = false;currentSelection = child.text"
              :class="currentSelection == child.text ? 'grey': ''"
            >
              <v-list-item-action v-if="child.icon">
                <v-icon>{{ child.icon }}</v-icon>
              </v-list-item-action>
              <v-list-item-content>
                <v-list-item-title>
                  {{ child.text }}
                </v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list-group>

        </template>
      </v-list>
    </v-navigation-drawer>
    <v-container fluid>
      <v-row justify="center" align="center">
        <v-col cols="12" style="text-align: center;">
          <v-card>
            {{currentSelection}}
          </v-card>
        </v-col>
      <v-row>
    </v-container>
  </v-app>
</div>


new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    currentSelection: '',
    items: [
      { icon: 'contacts', text: 'Contacts' },
      { icon: 'history', text: 'Frequently contacted' },
      { icon: 'content_copy', text: 'Duplicates' },
      {
        icon: 'keyboard_arrow_up',
        'icon-alt': 'keyboard_arrow_down',
        text: 'More',
        model: false,
        children: [
          { text: 'Import' },
          { text: 'Export' },
          { text: 'Print' },
          { text: 'Undo changes' },
          { text: 'Other contacts' },
        ],
      },
    ],
  }),
  created() {
    this.currentSelection = this.items[0].text;

    // retain the current route from this.$route.name or path and set it to current variable
    var current = ''; // set from this.$route
    // var current = 'Print'; // for testing comment above line and uncomment this line
    if (current) {
      var self = this;
      this.items.forEach((item, i) => {
        if (item.text == current) {
          this.currentSelection = current;
        }
        if (item.children && item.children.length) {
          if (item.children.map(x => x.text).includes(current)) {
            self.items[i].model = true;
            this.currentSelection = current;
          }
        }
      })
    }

  }
})

另一答案

在chans的帮助下，我设法解决了这个问题：

<v-navigation-drawer v-model="drawer" bottom dense clipped app shapped>
  <v-list nav dense flat v-for="item in navigationDrawerItems" :key="item.title">
    <v-list-item
      v-if="!item.items"
      :to="item.to"
      link
      active-class="primary--text text--primary-4"
      v-on:click="item.click;closeGroupIfActiveAfterClickingOnItem(item)"
    >
      <v-list-item-icon>
        <v-icon>{{item.icon}}</v-icon>
      </v-list-item-icon>
      <v-list-item-title>{{item.title}}</v-list-item-title>
    </v-list-item>
    <v-list-group :prepend-icon="item.icon" no-action v-else v-model="item.active">
      <template v-slot:activator>
        <v-list-item-content>
          <v-list-item-title v-text="item.title"></v-list-item-title>
        </v-list-item-content>
      </template>

      <v-list-item
        v-for="subItem in item.items"
        :key="subItem.title"
        :to="subItem.to"
        link
        v-on:click="closeGroupIfActiveAfterClickingOnItem(item)"
        active-class="primary--text text--primary-4"
      >
        <v-list-item-icon>
          <v-icon>{{subItem.icon}}</v-icon>
        </v-list-item-icon>
        <v-list-item-title>{{subItem.title}}</v-list-item-title>
      </v-list-item>
    </v-list-group>
  </v-list>
</v-navigation-drawer>

我的代码段：

private navigationDrawerItems = [
{
  title: 'Live',
  icon: 'videocam',
  click: this.getSettingsFromRest(),
  to: '/live'
},
{
  title: 'Settings',
  icon: 'build',
  click: this.getSettingsFromRest(),
  to: '/settings'
},
{
  title: 'About',
  icon: 'info',
  active: false,
  items: [{
    title: 'Contact us',
    to: '/contactus',
    icon: 'contact_support'
  }]
}]

private closeGroupIfActiveAfterClickingOnItem(pItem: any) {
for (let item of this.navigationDrawerItems) {
  //This is a group
  if (item.items) {
    //Check if group is active AND we are not closing self
    if (item.active && item.title != pItem.title) {
      item.active = false
    }
  } else { continue }
}
}

private checkRoute() {
for (let item of this.navigationDrawerItems) {
  if (item.items) {
    for (let subItem of item.items) {
      if (subItem.to == this.$route.fullPath) {
        item.active = true
        break
      }
    }
  } else { continue }
}
}