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