native.vue 3.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <template>
  2. <div id="native">
  3. <el-row>
  4. <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
  5. background-color="rgba(0,0,0,0.4)" text-color="#fff" active-text-color="#fff" :router="true">
  6. <template v-for="(item, index) in menu">
  7. <el-submenu :index="`${index}`" :key="index" v-if="item.type !== 'url' && item.type !== 'content'">
  8. <!-- 输出一级栏目↓ -->
  9. <template slot="title">
  10. {{ item.title }}
  11. </template>
  12. <template v-for="(sub, subIndex) in item.children">
  13. <template v-if="sub.children">
  14. <template v-for="(thr) in sub.children">
  15. <el-menu-item :index="thr.path" :key="thr.id" v-if="thr.type !== 'url'"
  16. style="float: left;height:60px;line-height:60px;font-size:20px;" class="hover">
  17. {{ thr.title }}</el-menu-item>
  18. <el-menu-item :index="``" :key="thr.id" @click="turnTo(thr.url)" v-else
  19. style="float: left;height:60px;line-height:60px;font-size:20px;" class="hover">
  20. {{ thr.title }}</el-menu-item>
  21. </template>
  22. </template>
  23. <el-menu-item :index="sub.path" :key="subIndex+'sub'"
  24. v-else-if="sub.type === 'content'||sub.type==='column'"
  25. style="float: left;height:60px;line-height:60px;font-size:20px;" class="hover">
  26. {{ sub.title }}</el-menu-item>
  27. <el-menu-item :index="`${index}-${subIndex}`" :key="subIndex+'sub'" @click="turnTo(sub.url)" v-else
  28. style="float: left;height:60px;line-height:60px;font-size:20px;" class="hover">
  29. {{ sub.title }}</el-menu-item>
  30. </template>
  31. </el-submenu>
  32. <!-- 一级栏目非常规栏目情况 -->
  33. <el-menu-item v-else-if="item.type === 'content'" :index="item.path" :key="index"
  34. style="float: left;height:60px;line-height:60px;font-size:20px;" class="hover">{{ item.title }}
  35. </el-menu-item>
  36. <el-menu-item v-else :index="``" :key="index" @click="turnTo(item.url)"
  37. style="float: left;height:60px;line-height:60px;font-size:20px;" class="hover">{{ item.title }}
  38. </el-menu-item>
  39. <!-- 输出一级栏目结束↑ -->
  40. </template>
  41. </el-menu>
  42. </el-row>
  43. </div>
  44. </template>
  45. <script>
  46. import { mapActions, mapState, mapMutations } from 'vuex';
  47. export default {
  48. name: 'native',
  49. props: {},
  50. components: {},
  51. data: () => ({
  52. activeIndex2: '1'
  53. }),
  54. created() { },
  55. computed: {
  56. ...mapState(['menu']),
  57. },
  58. methods: {
  59. turnTo(url) {
  60. window.open(url);
  61. },
  62. handleSelect(key, keyPath) {
  63. // console.log(key, keyPath);
  64. }
  65. },
  66. };
  67. </script>
  68. <style lang="less" scoped>
  69. .hover:hover {
  70. background-color: #215299 !important;
  71. }
  72. /deep/.el-submenu__title {
  73. font-size: 20px;
  74. padding: 0 50px;
  75. }
  76. /deep/.el-submenu__title:hover {
  77. background-color: #215299 !important;
  78. }
  79. /deep/.el-menu--horizontal > .el-submenu .el-submenu__icon-arrow {
  80. display: none;
  81. }
  82. </style>