CoreUI только один выпадающий список за раз - PullRequest
Новая
       12

CoreUI только один выпадающий список за раз

0 голосов
/ 03 июля 2018

Я хочу, чтобы раскрывающийся список на моей боковой панели был доступен только по одному, поэтому при нажатии на другое раскрывающееся меню предыдущий раскрывающийся список снова будет скрыт.

Ниже приведен пример моего текущего раскрывающегося списка, в котором вы можете открывать несколько раскрывающихся списков одновременно. https://coreui.io/vue/demo/#/dashboard

<template>
  <router-link tag="li" class="nav-item nav-dropdown" :to="url" disabled>
    <div class="nav-link nav-dropdown-toggle" @click="handleClick"><i :class="icon"></i> {{name}}</div>
    <ul class="nav-dropdown-items">
      <slot></slot>
    </ul>
  </router-link>
</template>

<script>
  export default {
    props: {
      name: {
        type: String,
        default: ''
      },
      url: {
        type: String,
        default: ''
      },
      icon: {
        type: String,
        default: ''
      }
    },
    methods: {
      handleClick(e) {
        e.preventDefault();
        e.target.parentElement.classList.toggle('open');
      }
    }
  };
</script>

Пожалуйста, помогите.

1 Ответ

0 голосов
/ 04 июля 2018

Обычный способ создать контроллер типа радиогруппы (где одновременно может быть выбран только один элемент) - это иметь переменную, которая указывает, какой из них выбран. Затем каждый элемент сравнивает себя с выбранным, чтобы определить, должен ли он находиться в открытом состоянии.

Поскольку у вас есть несколько router-link, которые не знают друг о друге, родительский объект должен будет иметь переменную индикатора which-one-is-selected. handleClick вашего router-link должно $emit событие , которое родительский объект будет обрабатывать путем изменения переменной индикатора. И router-link должен получить переменную-индикатор как prop и использовать ее в , вычисленном , чтобы установить класс open соответствующим образом.

Ваш код может выглядеть следующим образом: 

<template>
  <router-link tag="li" class="nav-item nav-dropdown" :class="openClass" :to="url" disabled>
    <div class="nav-link nav-dropdown-toggle" @click="handleClick"><i :class="icon"></i> {{name}}</div>
    <ul class="nav-dropdown-items">
      <slot></slot>
    </ul>
  </router-link>
</template>

<script>
  export default {
    props: {
      name: {
        type: String,
        default: '',
        selectedItem: Object
      },
      url: {
        type: String,
        default: ''
      },
      icon: {
        type: String,
        default: ''
      }
    },
    computed: {
      openClass() {
        return this.selectedItem === this ? 'open' : '';
      }
    }
    methods: {
      handleClick(e) {
        e.preventDefault();
        this.$emit('setSelected', this);
      }
    }
  };
</script>
...