时间戳

首页 > 解决方案 > CoreUI 一次只有一个下拉菜单

javascript - CoreUI 一次只有一个下拉菜单

问题描述

我希望我的侧边栏下拉菜单一次只能使用一个，所以当我点击另一个下拉菜单时，前一个下拉菜单将再次隐藏。

下面是我当前下拉列表的示例，您可以在其中一次打开多个下拉列表。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>

请帮忙。

标签： javascriptjquerycssvue.jscore-ui

解决方案

制作无线电组类型控制器（一次只能选择一项）的常用方法是使用一个变量来指示选择了哪一项。然后每个元素将自己与选定的元素进行比较，以确定它是否应该处于打开状态。

由于您有多个router-link彼此不了解的 s，因此父对象将必须拥有 which-one-is-selected 指示变量。handleClick您router-link应该是父级将通过更改指示变量来处理的$emit事件。并且router-link应该接收指标变量作为道具，并在计算中使用它来适当地设置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>

推荐阅读