CoreUI 一次只有一个下拉菜单

CoreUI only one dropdown at a time

我希望侧边栏下拉菜单一次只能显示一个,这样当我点击另一个下拉菜单时,前一个下拉菜单将再次隐藏。

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

请帮忙。

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

由于您有多个彼此不了解的 router-link,父对象将必须拥有“选择哪一个”指示符变量。您的 router-linkhandleClick 应该 $emit an event that the parent will handle by changing the indicator variable. And the router-link should receive the indicator variable as a prop and use it in a computed 以适当设置 open class。

您的代码可能如下所示:

<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>

您可以在 _nav.js 中添加“itemAttr”属性,例如:

items: [
    {
    name: 'Dropdown',
    url: '/dropdown',
    icon: 'icon-grid',
    itemAttr: { id: 'drop-1' },
    children: [{
      name: 'Sub-Item 1',
      url: '/dropdown/subitem1'
    }, {
      name: 'Sub-Item 2',
      url: '/dropdown/subitem2'
    }, {
      name: 'Sub-Item 3',
      url: '/dashboard/subitem3'
    }]
    },
    {
      name: 'Base',
      url: '/base',
      icon: 'icon-base',
      itemAttr: { id: 'item-1' }
    }
]

并在 DefaultLayout.js 中添加 event-listeners 用于点击这两个 ID,例如:

var e1 = document.getElementById("drop-1")
e1.addEventListener("click", function () {
  e1.classList.className += " open";
});   
var ev1 = document.getElementById("item-1")
ev1.addEventListener("click", function () {
  e1.className = "nav-item nav-dropdown"  
});

同样,您可以添加更多下拉菜单并为其指定 id 的“drop-2”和“drop-3”。 OnClick,如果你想打开那个下拉列表使用:

e<i>.classList.className += " open"; 

对于您要关闭的所有剩余下拉菜单,请使用:

e<j>.className = "nav-item nav-dropdown";

单击要关闭所有下拉菜单的项目时,请使用:

e<i>.className = "nav-item nav-dropdown"; //for all the dropdown items.