Как сделать выпадающий для пунктов меню, когда количество или ширина превышает пределы строки меню в VUE - PullRequest
Новая
       12

Как сделать выпадающий для пунктов меню, когда количество или ширина превышает пределы строки меню в VUE

0 голосов
/ 16 апреля 2019

У меня есть панель навигации, в которой есть пункты меню, представленные в виде вкладок.

меня беспокоит всякий раз, когда пункты меню превышают лимит, и лишние пункты меню, которые не помещаются, должны быть перемещены в выпадающее меню (showmore) vue

выходное изображение 

      <template>
        <div class="nav">
        <nav class="navigation">
          <ul>
             <li v-for="(item, index) in groups" :key="`nav-${index}`" >
              <router-link class="router-link- 
              tab":to="item.name.toLowerCase()">{{item.name}}</router- 
              link>
              </li>
           </ul>
          </nav>
         </div>
       </template>

         <script>
          export default {
          name: 'Tab',

          props: {
            back: {
            type: Boolean,
            default: true,
                },
            },

           </script>

1 Ответ

0 голосов
/ 16 апреля 2019

Это нелегко сделать.Вы можете взглянуть на этот пример, который я создал для вас.Вам просто нужно настроить CSS.Но это один из способов сделать это.

https://codesandbox.io/s/k1oz5vnl4r?fontsize=14

<template>
  <div id="app">
    <nav class="navigation" ref="nav">
      <div
        style="display: inline"
        v-for="(item, index) in groups"
        :key="`nav-${index}`"
        :ref="`nav-${index}`"
      >
        <router-link
          style="margin: 0 16px"
          :to="item.name.toLowerCase()"
          v-if="maxNavItems == 0 || index < maxNavItems"
        >{{item.name}}</router-link>
      </div>
      <select v-model="selected" ref="dropdown">
        <option disabled value="default">Please select one</option>
        <option v-for="(item, index) in getDropdownItems()" :key="`nav-${index}`">{{item.name}}</option>
      </select>
    </nav>
  </div>
</template>
<script>
export default {
  name: "app",
  data: () => ({
    groups: [
      { name: "NavItem1" },
      { name: "NavItem2" },
      { name: "NavItem3" },
      { name: "NavItem4" },
      { name: "NavItem5" },
      { name: "NavItem6" },
      { name: "NavItem7" },
      { name: "NavItem8" },
      { name: "NavItem9" },
      { name: "NavItem10" }
    ],
    width: "",
    maxNavItems: 0,
    selected: "default"
  }),
  async mounted() {
    await this.$nextTick();
    this.width = this.$refs["nav"].offsetWidth;

    let childrenTotalWidth = 0;

    for (let i = 0; i < this.$refs["nav"].children.length; i++) {
      const child = this.$refs["nav"].children[i];
      childrenTotalWidth += child.offsetWidth;
      if (childrenTotalWidth > this.width) {
        this.maxNavItems = i - 1;
        break;
      }
    }
  },
  methods: {
    getDropdownItems() {
      const newArr = [];
      for (let i = this.maxNavItems; i < this.groups.length; i++) {
        newArr.push(this.groups[i]);
      }
      return newArr;
    }
  }
};
</script>

<style>
#app {
  margin: 60px;
}

.link {
  display: inline-block;
  padding: 10px;
}

.router-link-active {
  color: green;
}
</style>
...