123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174 |
- <template>
- <nav class="client-head">
- <div class="client-container head-layout">
- <div class="head-left">
- <a></a>
- <el-menu
- :default-active="activeIndex"
- class="el-menu-demo"
- :router="true"
- mode="horizontal"
- >
- <template v-for="(item,index) in headerArr">
- <el-submenu :index="`${item.keyPath}`" v-if="item.children && item.children.length > 0" popper-class="mta-menu-two">
- <template slot="title">{{item.content}}</template>
- <el-menu-item :index="`${child.keyPath}`" v-for="child of item.children"
- :key="child.keyPath">{{child.content}}
- </el-menu-item>
- </el-submenu>
- <el-menu-item :index="`${item.keyPath}`" v-else>
- {{item.content}}
- </el-menu-item>
- </template>
- </el-menu>
- </div>
- <div class="head-right">
- <i></i><span>4000-522-130</span>
- </div>
- </div>
- </nav>
- </template>
- <script>
- import MtaUploadAlCloud
- from '@/components/management/Layout/UploadAlCloud/UploadAlCloud';
- import axios from 'axios';
- import { mapGetters } from 'vuex';
- import { setAuth, removeAuth } from '@/utils/auth';
- import { setUserIcon, checkUrlIsNotHttpUrl, getTrimData, } from '@/utils/common';
- import { initThemeColor } from '@/utils/theme';
- export default {
- name: 'mtaHeader',
- props: {
- activeNav: {
- type: String,
- require: true,
- default: '0',
- },
- },
- components: {
- },
- data() {
- return {
- activeIndex: this.activeNav,
- headerArr: [
- {
- content: '首页',
- keyPath: '/index',
- },
- /* {
- content: '考试平台',
- keyPath: '/c/kecheng/lists',
- children: [
- {
- content: 'xxxxxx',
- keyPath: '/c/kecheng/lists',
- },
- ],
- },*/
- {
- content: '考试平台',
- keyPath: '/c/examPlatform',
- children: [],
- },
- {
- content: '培训平台',
- keyPath: '/c/peixunPlatform',
- children: [],
- },
- {
- content: '课程开发',
- keyPath: '/c/courseDev',
- children: [],
- },
- {
- content: '新闻资讯',
- keyPath: '/c/newsInfor',
- children: [],
- },
- {
- content: '帮助中心',
- keyPath: '/c/helpCenter',
- children: [],
- }, {
- content: '关于我们',
- keyPath: '/c/aboutUs',
- children: [],
- },
- ],
- };
- },
- watch: {
- '$route.path': function (newVal, oldVal) {
- this.activeIndexSync();
- },
- },
- computed: {
- },
- methods:{
- // ************** 导航状态 ****************************
- activeIndexSync() {
- const path = this.$route.path;
- const idx = _.findIndex(this.headerArr, function (o) {
- return o.keyPath === path;
- });
- if (idx > -1) {
- this.activeIndex = this.headerArr[idx].keyPath;
- } else {
- for (const header of this.headerArr) {
- if (header.children) {
- const idx2 = _.findIndex(header.children, function (o) {
- return o.keyPath === path;
- });
- if (idx2 > -1) {
- this.activeIndex = header.keyPath;
- return;
- }
- }
- }
- }
- },
- checkArray() {
- /* if (JSON.parse(this.menuFlag) == 1) {
- for (let i = this.headerArr.length - 1; i >= 0; i--) {
- if (this.headerArr[i].content == '课程中心') {
- this.headerArr.splice(i, 1);
- }
- if (this.headerArr[i].keyPath === '/c/IndexPeixun') {
- this.headerArr.splice(i, 1);
- }
- if (this.headerArr[i].children && this.headerArr[i].children.length >= 2 && this.headerArr[i].children[1].content == '课程成绩') {
- this.headerArr[i].children.splice(1, 1);
- }
- if (this.headerArr[i].keyPath === '/c/resource/library') {
- this.headerArr.splice(i, 1);
- }
- if (this.headerArr[i].keyPath === '/c/QuestionAndAnswer/lists') {
- this.headerArr.splice(i, 1);
- }
- }
- } else {
- for (let i = this.headerArr.length - 1; i >= 0; i--) {
- if (this.headerArr[i].keyPath === '/c/Index') {
- this.headerArr.splice(i, 1);
- }
- }
- }*/
- this.activeIndexSync();
- },
- }
- ,
- created() {
- console.log(this.activeIndex);
- this.checkArray();
- initThemeColor();
- },
- };
- </script>
|