VueJS - Как выделить кнопку боковой панели даже при отображении содержимого просмотра маршрутизатора

Здравствуйте, я выделяю кнопку, которую когда-либо нажимали на боковой панели.

введите описание изображения здесь

Здесь я хочу выделить кнопку, даже если отображается содержимое просмотра маршрутизатора. Но в настоящее время отображается изображение ниже, если я нахожусь в просмотре содержимого маршрутизатора.

введите описание изображения здесь

У меня есть компонент Blog.vue, а кнопка Blog находится на боковой панели. Этот Blog.vue содержит несколько карточек, и на каждой карточке есть значок, поэтому при нажатии на любой значок отображается, что соответствующий контент здесь изменяется.

Первоначально при загрузке страницы или при нажатии кнопки «Блог» на боковой панели она выделяется. Но как только пользователь щелкает значок на любой карточке, кнопка «Блог» не выделяется, как показано на втором изображении.

Вот VerticalNavMenu.vue

 <vs-sidebar
          class="v-nav-menu items-no-padding"
          v-model="isVerticalNavMenuActive"
          ref="verticalNavMenu"
          default-index="-1"
          :click-not-close="clickNotClose"
          :reduce-not-rebound="reduceNotRebound"
          :parent="parent"
          :hiddenBackground="clickNotClose"
          :reduce="reduce"
          v-hammer:swipe="onMenuSwipe">
      <div @mouseenter="mouseEnter" @mouseleave="mouseLeave">

 <div @mouseenter="mouseEnter" @mouseleave="mouseLeave">

        <div class="shadow-bottom" v-show="showShadowBottom" />

        <!-- Menu Items -->
        <component :is="scrollbarTag" ref="verticalNavMenuPs" class="scroll-area-v-nav-menu pt-2" 
         :settings="settings" @ps-scroll-y="psSectionScroll" @scroll="psSectionScroll" :key="$vs.rtl">
          <template v-for="(item, index) in menuItemsUpdated">

            <!-- Group Header -->
            <span v-if="item.header && !verticalNavMenuItemsMin" class="navigation-header truncate" 
            :key="`header-${index}`">
              {{ $t(item.i18n) || item.header }}
            </span>
            <!-- /Group Header -->

            <template v-else-if="!item.header">

              <!-- Nav-Item -->
              <v-nav-menu-item
              ...
              </v-nav-menu-item>

              <!-- Nav-Group -->
              <template v-else>
                <v-nav-menu-group
                ...  
                />
              </template>
              <!-- /Nav-Group -->
            </template>
          </template>
        </component>
        <!-- /Menu Items -->
      </div>
      ..
      showShadowBottom: false
      ..
      psSectionScroll () {
          const scroll_el = this.$refs.verticalNavMenuPs.$el || this.$refs.verticalNavMenuPs
          this.showShadowBottom = scroll_el.scrollTop > 0
    },

Вот файл navMenuItem.js:

 {
    header: 'Apps',
    icon: 'PackageIcon',
    i18n: 'Apps',
    items: [
      {
        url: '/apps/blog-complete',
        name: 'Blog',
        slug: 'blog-complete',
        icon: 'CpuIcon',
        i18n: 'Blog'
      },

      {
        url: '/apps/info-tech',
        name: 'Info Tech',
        slug: 'info-tech',
        icon: 'Icon'
        i18n: 'Info Tech'
      },
      ...
    ]

Вот router.js

       {
          path: '/apps/blog-complete',
          name: 'app-blog-complete',
          component: () => import('@/views/apps/Blog.vue'),
        },
        {
          path: '/apps/inner-blog/:apiVal_id',  // Here for these router view contents i want to show the button highlighted.
          name: 'Inner',
          component: () => import('./views/apps/InnerBlog.vue'),
        },

Вот Blog.vue:

       ...
       <div class="right">
           <b-badge @click="$router.push({name: 'Inner', params: {id: apiVal.id.toString() }})
           .catch(err => {})">Check Deep</b-badge>
       </div>
       ...

Вот InnerBlog.vue:

       ...
       <div class="right">
           Welcome to my route :)
       </div>
       ...

Пожалуйста, помогите мне выделить кнопку «Блог» на боковой панели, даже если она отображает содержимое для просмотра на маршрутизаторе.


button vue.js highlight
person Quantum    schedule 28.01.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Самый простой способ сделать это - использовать класс .router-link-active, который добавляется к компоненту <router-link> при сопоставлении его целевого маршрута, но, поскольку вы не используете его, это можно сделать с помощью следующего трюка:

Сначала добавьте это к своим методам:

methods: {
  subIsActive(input) {
    const paths = Array.isArray(input) ? input : [input]
    return paths.some(path => {
      return this.$route.path.indexOf(path) === 0 // current path starts with this path string
    })
  }
}

Эта функция проверяет, начинается ли текущий путь с того, что вы передали в функцию.

Во-вторых, вам нужно добавить привязку класса к вашему элементу span, который отображает заголовки групп следующим образом:

<span v-if="item.header && !verticalNavMenuItemsMin" class="navigation-header truncate" 
        :key="`header-${index}`" :class="{'is-active': subIsActive(item.url)}">
          {{ $t(item.i18n) || item.header }}
</span>

В-третьих, вам необходимо изменить свои маршруты. Например, каждый значок, доступный при нажатии на кнопку «Блог», должен начинаться с / apps / blog-complete.

        {
          path: '/apps/blog-complete/inner-blog/:apiVal_id',  // Here for these router view contents i want to show the button highlighted.
          name: 'Inner',
          component: () => import('./views/apps/InnerBlog.vue'),
        },

В-четвертых, вы добавляете класс is-active в раздел стиля:

 .is-active{
   background-color: red;
 }
person Mario Klisanic    schedule 01.02.2021
comment
Привет @Mario, я должен определить все это в InnerBlog.vue, верно ?? ' Потому что это компонент маршрута - person Quantum; 01.02.2021
comment
Вам нужно отредактировать элемент ‹span›, добавить метод и класс в VerticalNavMenu.vue, а также изменить маршруты в router.js. - person Mario Klisanic; 01.02.2021
comment
Хорошо, я попробую и дам тебе знать - person Quantum; 01.02.2021
comment
Не знаю, почему не получилось - person Quantum; 01.02.2021
comment
У вас есть ошибки или он просто не работает? Если вы не хотите быть уверенными, что мы решим эту проблему, вы можете воспроизвести проблему с помощью этой песочницы vue: codeandbox.io/ s / vue, а затем отправьте мне ссылку, когда вы ее воссоздадите. - person Mario Klisanic; 01.02.2021