12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485 |
- <template>
- <div id="native">
- <el-row>
- <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
- background-color="rgba(0,0,0,0.4)" text-color="#fff" active-text-color="#fff" :router="true">
- <template v-for="(item, index) in menu">
- <el-submenu :index="`${index}`" :key="index" v-if="item.type !== 'url' && item.type !== 'content'">
- <!-- 输出一级栏目↓ -->
- <template slot="title">
- {{ item.title }}
- </template>
- <template v-for="(sub, subIndex) in item.children">
- <template v-if="sub.children">
- <template v-for="(thr) in sub.children">
- <el-menu-item :index="thr.path" :key="thr.id" v-if="thr.type !== 'url'"
- style="float: left;height:60px;line-height:60px;font-size:20px;" class="hover">
- {{ thr.title }}</el-menu-item>
- <el-menu-item :index="``" :key="thr.id" @click="turnTo(thr.url)" v-else
- style="float: left;height:60px;line-height:60px;font-size:20px;" class="hover">
- {{ thr.title }}</el-menu-item>
- </template>
- </template>
- <el-menu-item :index="sub.path" :key="subIndex+'sub'"
- v-else-if="sub.type === 'content'||sub.type==='column'"
- style="float: left;height:60px;line-height:60px;font-size:20px;" class="hover">
- {{ sub.title }}</el-menu-item>
- <el-menu-item :index="`${index}-${subIndex}`" :key="subIndex+'sub'" @click="turnTo(sub.url)" v-else
- style="float: left;height:60px;line-height:60px;font-size:20px;" class="hover">
- {{ sub.title }}</el-menu-item>
- </template>
- </el-submenu>
- <!-- 一级栏目非常规栏目情况 -->
- <el-menu-item v-else-if="item.type === 'content'" :index="item.path" :key="index"
- style="float: left;height:60px;line-height:60px;font-size:20px;" class="hover">{{ item.title }}
- </el-menu-item>
- <el-menu-item v-else :index="``" :key="index" @click="turnTo(item.url)"
- style="float: left;height:60px;line-height:60px;font-size:20px;" class="hover">{{ item.title }}
- </el-menu-item>
- <!-- 输出一级栏目结束↑ -->
- </template>
- </el-menu>
- </el-row>
- </div>
- </template>
- <script>
- import { mapActions, mapState, mapMutations } from 'vuex';
- export default {
- name: 'native',
- props: {},
- components: {},
- data: () => ({
- activeIndex2: '1'
- }),
- created() { },
- computed: {
- ...mapState(['menu']),
- },
- methods: {
- turnTo(url) {
- window.open(url);
- },
- handleSelect(key, keyPath) {
- // console.log(key, keyPath);
- }
- },
- };
- </script>
- <style lang="less" scoped>
- .hover:hover {
- background-color: #215299 !important;
- }
- /deep/.el-submenu__title {
- font-size: 20px;
- padding: 0 50px;
- }
- /deep/.el-submenu__title:hover {
- background-color: #215299 !important;
- }
- /deep/.el-menu--horizontal > .el-submenu .el-submenu__icon-arrow {
- display: none;
- }
- </style>
|