el-menu导航菜单item过多的显⽰问题
<!-- 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"
>
<el-button
v-if="!isApplicant && this._id"
type="primary"
size="mini"
@click="toSignUp('add')"
>参会报名</el-button
>
<el-button
v-if="isApplicant && this._id"
v-if="isApplicant && this._id"
type="primary"
size="mini"
@click="toSignUp('modify')"
>修改报名</el-button
>
<a href="/meetingInfo/MeetingAttend" target="_blank"
><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 的宽度计算要算上⾸页
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。