el-menu 导航菜单 item 过多的显示问题

小小程序员——Tracy

已于 2023-04-12 15:05:14 修改

阅读量5.7k

点赞数

分类专栏： Vue Element 文章标签： vue

于 2021-03-31 17:37:01 首次发布

本文链接：https://blog.csdn.net/weixin_48702807/article/details/115356075

版权

Vue Element 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

    <!-- PC menu -->
    <div class="kxb-hidden-small kxb-hidden-medium kxb-black-bg">
      <div class="kxb-fluid kxb-padding-bottom-0">
        <div class="kxb-col-12-9 kxb-col-medium-12-12">
          <div class="kxb-groupmenu">
            <div class="left">
              <i
                class="el-icon-arrow-left kxb-pointer"
                @click="menuleft"
                v-show="currentTabIndex"
              ></i>
            </div>
            <div class="menu pcmenu">
              <el-menu
                mode="horizontal"
                class="el-menu-vertical-demo"
                :default-active="tabActive"
              >
                <el-menu-item
                  index="首页"
                  v-show="0 >= currentTabIndex"
                  @click="tabActive = '首页'"
                  >首页</el-menu-item
                >
                <el-menu-item
                  @click="select(item)"
                  v-for="(item, index) in showTabs"
                  :key="item._id"
                  :index="item.title"
                  v-show="index + 1 >= currentTabIndex && currentTabIndex + 9 > index + 1"
                >
                  <!-- 9个tab默认显示 -->
                  {{ item.name ? item.name : item.title }}</el-menu-item
                >
              </el-menu>
            </div>
            <div class="right">
              <i
                class="el-icon-arrow-right kxb-pointer"
                @click="menuright"
                v-show="showTabs.length - currentTabIndex + 1 > 9"
              >
                <!-- 9个tab默认显示 -->
              </i>
            </div>
          </div>
        </div>
        <div
          class="kxb-col-12-3 kxb-col-medium-12-12 kxb-center"
          style="padding-top: 15px"
        >
          <el-button
            v-if="!isApplicant && this._id"
            type="primary"
            size="mini"
            @click="toSignUp('add')"
            >参会报名</el-button
          >
          <el-button
            v-if="isApplicant && this._id"
            type="primary"
            size="mini"
            @click="toSignUp('modify')"
            >修改报名</el-button
          >
          <a href="/meetingInfo/MeetingAttend" target="_blank" style="margin-left: 10px"
            ><el-button type="primary" plain size="mini">我的参会</el-button></a
          >
        </div>
      </div>
    </div>
    <!-- Mobile and Paid menu -->
    <div
      class="mobilemenu kxb-padding-top-half kxb-right kxb-hidden-large kxb-hidden-xlarge"
    >
      <el-dropdown @command="select" trigger="click">
        <span class="mobile-tab">
          <span></span>
          <span></span>
          <span></span>
          <!-- 空的 三个 span 不要删除，是用来画 tab 手机版的三条横线的 -->
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item index="home" command="1">首页</el-dropdown-item>
          <el-dropdown-item v-for="item in showTabs" :key="item._id" :command="item">{{
            item.name ? item.name : item.title
          }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

/*tab part begin*/
.kxb-groupmenu {
  width: 100%;
  display: flex;
  margin-bottom: 0;

  .left,
  .right {
    width: 15px;
    color: #fff;
    font-size: 20px;
  }
  .left {
    text-align: right;
  }

  /* tab 整体高度设置 */

  &,
  .left,
  .right,
  /deep/ .el-menu--horizontal > .el-menu-item {
    height: 60px;
    line-height: 60px;
  }

  .menu {
    text-align: center;
    padding: 0;
    font-size: 1.42rem;

    /deep/ .el-menu--horizontal {
      display: inline-block;
      border-bottom: none;
      background-color: #000;
      width: 100%;
    }

    /deep/ .el-menu--horizontal > .el-menu-item {
      width: var(--showTabNum, 11.11%);
      /*每次显示 8 个 tab   <!-- 9个tab默认显示 -->*/
      color: white;
      font-size: 1.14rem;
      border-bottom: none;
    }

    /deep/ .el-menu--horizontal > .el-menu-item.is-active,
    /deep/ .el-menu--horizontal > .el-menu-item.is-active:hover {
      /*高亮后 item 样式 */
      background-color: #1b57d6;
    }

    /deep/ .el-menu--horizontal > .el-menu-item:hover {
      /*鼠标滑过 item 样式 */
      color: #1fb9b7;
      background-color: #000;
    }
  }
}

.mobilemenu {
  padding: 10px 15px 5px 0;
  .mobile-tab {
    border: 1px solid #333;
    border-radius: 2px;
    display: inline-block;
    height: 32px;
    width: 38px;
    padding: 7px 8px 0;
    box-sizing: border-box;
    & > span {
      border-bottom: 2px solid #333;
      margin-bottom: 4px;
      display: block;
    }
  }
}
/*tab part end*/

if (this.showTabs.length < 9) {
              //如果 tab 小于 8个 那么 tab 的宽度将不再是 12.5%  <!-- 原有8个tab默认显示，现改为10个 -->
              let value = 100 / (this.showTabs.length + 1) + "%";
              document.body.style.setProperty("--showTabNum", value);
              //这里 + 1 是因为 tab 的宽度计算要算上首页
            }

Bluma 导航显示过多的解决方案

<!-- Tab 正常样式 -->
<template>
  <section class="section kxb-tab-color has-text-white px-1 py-0 is-relative">
    <!-- Tab PC version Begin -->
    <div class="is-hidden-mobile is-hidden-tablet-only">
      <div
        class="kxb-pc-menu is-flex is-flex-direction-row is-justify-content-space-between"
      >
        <div class="kxb-width-small has-text-centered">
          <i
            v-show="currentTabIndex"
            class="el-icon-arrow-left is-clickable"
            @click="menuLeft"
          >
          </i>
        </div>
        <div class="has-text-centered is-flex-grow-1">
          <div class="tabs is-centered">
            <ul>
              <li
                v-show="0 >= currentTabIndex"
                :class="{ 'is-active': tab == '-1' }"
              >
                <a @click="tabChangeHandler('-1')">{{
                  $t('conference.home')
                }}</a>
              </li>
              <li
                v-for="(item, index) in conference.modules"
                v-show="
                  index + 1 >= currentTabIndex &&
                  currentTabIndex + showTabNumber > index + 1
                "
                :key="item.id"
                :class="{ 'is-active': tab == item.type }"
              >
                <a @click="tabChangeHandler(item.type, item.id)">{{
                  ch ? item.name : item.nameEn
                }}</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="kxb-width-small has-text-centered">
          <i
            v-show="
              conference.modules.length - currentTabIndex + 1 > showTabNumber
            "
            class="el-icon-arrow-right is-clickable"
            @click="menuRight"
          >
          </i>
        </div>
      </div>
    </div>
    <!-- Tab PC version End -->
    <!-- Tab Mobile version Begin -->
    <div
      class="is-hidden-desktop-only is-hidden-widescreen-only is-hidden-fullhd dropdown kxb-mobile-menu is-right"
      :class="{ 'is-active': dropdownShow }"
    >
      <div class="dropdown-trigger">
        <button
          class="button"
          aria-haspopup="true"
          aria-controls="dropdown-menu"
          @click="dropdownShow = !dropdownShow"
        >
          <span class="mobile-tab">
            <span></span>
            <span></span>
            <span></span>
            <!-- 空的 三个 span 不要删除，是用来画 tab 手机版的三条横线的 -->
          </span>
        </button>
      </div>
      <div id="dropdown-menu" class="dropdown-menu" role="menu">
        <div class="dropdown-content">
          <a
            class="dropdown-item"
            :class="{ 'is-active': tab == '-1' }"
            @click="tabChangeHandler('-1')"
          >
            {{ $t('conference.home') }}
          </a>
          <a
            v-for="(item, index) in conference.modules"
            :key="item.id"
            class="dropdown-item"
            :class="{ 'is-active': tab == item.type }"
            @click="tabChangeHandler(item.type, item.id)"
          >
            {{ ch ? item.name : item.nameEn }}
          </a>
        </div>
      </div>
    </div>
    <!-- Tab Mobile version End -->
  </section>
</template>
<script lang="ts">
import Vue from 'vue';

type DataType = {
  currentTabIndex: number;
  tab: string;
  showTabNumber: number;
  dropdownShow: boolean;
};

type MethodsType = {
  tabChangeHandler(type: string, id?: string): void;
  menuLeft(): void;
  menuRight(): void;
};

type ComputedType = {};

type propType = {
  conference: Object;
  ch: Boolean;
};

export default Vue.extend<DataType, MethodsType, ComputedType, propType>({
  name: 'TabNormal',
  props: {
    conference: {
      type: Object,
      default() {
        return {};
      },
    },
    ch: {
      type: Boolean,
      default() {
        return true; // 页面语言默认汉语
      },
    },
  },
  data: () => ({
    tab: '-1', // 默认展示首页 用于判断高亮
    currentTabIndex: 0, // 默认展示首页 用于左边右边箭头和中间 item show/hide 的 判断
    showTabNumber: 4, // 默认显示的 tab 的数量
    dropdownShow: false,
  }),
  mounted() {},
  methods: {
    menuLeft() {
      this.currentTabIndex--;
    },
    menuRight() {
      this.currentTabIndex++;
    },
    tabChangeHandler(type: string, id?: string) {
      this.tab = type;
      this.$emit('tabChangeHandler', type, id);
    },
  },
});
</script>
<style lang="sass" scoped>
.kxb-tab-color
  background: var(--main-color)


/*tab part begin*/
.kxb-pc-menu
  width: 100%
  display: flex

  .kxb-width-small
    width: 150px
    padding-top: 6px

  .tabs
    ul
      border-bottom-color: #1a73e8
    a
      color: #fff
      border-bottom-color: #1a73e8
    a:hover
      border-bottom-color: #1a73e8

    li.is-active
      a
        color: #ff1
        border-bottom-color: #1a73e8

.kxb-mobile-menu
  background-color: none
  border: none
  position: absolute
  right:10px
  top:15px
  .button
    background-color: rgba(0, 0, 0, 0) !important
  .mobile-tab
    span
      border-bottom: 2px solid #333
      margin-top: 4px
      margin-bottom: 2px
      display: block
      width: 25px
</style>