native.vue 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <template>
  2. <div id="native">
  3. <el-row>
  4. <el-col :span="24">
  5. <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" background-color="#336699"
  6. text-color="#fff" active-text-color="#fff" style="height:40px;" :router="true">
  7. <template v-for="(item, index) in menu">
  8. <el-submenu :index="`${index}`" :key="index" v-if="item.type !== 'url' && item.type !== 'content'">
  9. <template slot="title">
  10. {{ item.title }}
  11. </template>
  12. <template v-for="(sub, subIndex) in item.children">
  13. <el-menu-item :index="`${index}-${subIndex}`" :key="subIndex+'sub'" v-if="sub.children"
  14. style="float:left">
  15. <template slot="title">
  16. {{ sub.title }}
  17. </template>
  18. </el-menu-item>
  19. </template>
  20. </el-submenu>
  21. </template>
  22. </el-menu>
  23. </el-col>
  24. </el-row>
  25. </div>
  26. </template>
  27. <script>
  28. import { mapActions, mapState, mapMutations } from 'vuex';
  29. export default {
  30. name: 'native',
  31. props: {},
  32. components: {},
  33. data: () => ({
  34. activeIndex2: '',
  35. }),
  36. created() { },
  37. computed: {
  38. ...mapState(['menu']),
  39. },
  40. methods: {
  41. turnTo(url) {
  42. window.open(url);
  43. },
  44. },
  45. };
  46. </script>
  47. <style lang="less" scoped>
  48. /deep/.el-menu--horizontal > .el-submenu .el-submenu__title {
  49. height: 40px;
  50. line-height: 40px;
  51. }
  52. </style>