menu菜单编辑以及设置样式

<template>
  <div style="width: 100%;height:100%;position: absolute;left: 0;top: 0;overflow: auto;" class="my_">
    <div
      style="width: 82px;" v-for="(item,index) in menutoolObj" :key="item.key">
      <a-menu
        mode="inline"
        style="width: 170px;position: absolute;bottom: 0;"
        :key="item.key"
        :style="index !== menutoolObj.length-1?{'left':index*82+'px'}:{'right':0}"
        v-if="whichOneShow===item.title"
        @click="clickMenuItem"
      >
        <template v-for="ele in item.children">
          <a-sub-menu :key="ele.key" v-if="ele.children">
            <span slot="title"><a-icon type="appstore"/><span>{{ele.title}}</span></span>
            <a-menu-item :key="uu.key" v-for="uu in ele.children">
              {{uu.title}}
            </a-menu-item>
          </a-sub-menu>
          <template v-else>
            <a-menu-item :key="ele.key">
              {{ele.title}}
            </a-menu-item>
          </template>
        </template>
      </a-menu>
    </div>
  </div>
</template>

<script>
  import {menutoolObj} from "./toolMenu2";
  import {Menu, Icon} from 'ant-design-vue'

  export default {
    components: {
      AMenu: Menu,
      AMenuItem: Menu.Item,
      ASubMenu: Menu.SubMenu,
      AIcon: Icon
    },
    data() {
      return {
        menutoolObj: menutoolObj,
        // 决定显示哪个菜单
        whichOneShow: '地图操作',
      }
    },
    methods: {
      clickMenuItem(e) {
        console.log(e)
      },
      // 由父组件点击决定
      showWhichOne(e) {
        this.whichOneShow = e
      },
    }
  }
</script>

<style scoped lang="less">
  .my_ {
    .ant-menu {
      .ant-menu-submenu-title {
        font-size: 18px;
      }

      .anticon {
        font-size: 18px;
      }

      .ant-menu-item {
        font-size: 18px;
      }

      span {
        font-size: 18px;
      }
    }
  }
</style>

// 注意,此一级菜单的顺序需跟地图显示顺序保持一致
let menutoolObj = [
  {
    title: "地图操作",
    key: "地图操作",
    children: [
      {
        title: "图层切换",
        key: "图层切换",
        children: [
          {
            title: "卫星图",
            key: "卫星图",
          },
          {
            title: "道路图",
            key: "道路图",
          }

        ]
      },
      {
        title: "维度切换",
        key: "维度切换",
        children: [
          {
            title: "二维",
            key: "二维",
          },
          {
            title: "三维",
            key: "三维",
          }
        ]
      },
      {
        title: "刷新地图",
        key: "刷新地图",
      },
      {
        title: "量算",
        key: "量算",
        children: [
          {
            title: "直线距离",
            key: "直线距离",
          }
        ]
      },
    ]
  },
  {
    title: "军事标绘",
    key: "军事标绘",
    children: [
      {
        title: "点",
        key: "点",
      },
      {
        title: "线",
        key: "线",
      },
      {
        title: "圆",
        key: "圆",
      }
    ]
  },
  {
    title: "指令下发",
    key: "指令下发",
    children: [
      {
        title: "干扰下发",
        key: "干扰下发",
        children: [
          {
            title: "等福报",
            key: "等福报",
          },
          {
            title: "单音",
            key: "单音",
          },
          {
            title: "多音",
            key: "多音",
          }
        ]
      },
      {
        title: "设备指令",
        key: "设备指令",
        children: [
          {
            title: "设备重置",
            key: "设备重置",
          },
          {
            title: "设备暂停",
            key: "设备暂停",
          },
          {
            title: "设备重启",
            key: "设备重启",
          }
        ]
      }
    ]
  },
  {
    title:"组网占位",
    key: "组网占位",
    children: [
      {
        title:"组网",
        key:"组网"
      }
    ]
  },
  {
    title:"干扰占位",
    key: "干扰占位",
    children: [
      {
        title:"干扰",
        key:"干扰"
      }
    ]
  },
  {
    title:"其他",
    key: "其他",
    children: [
      {
        title:"调试",
        key:"调试"
      }
    ]
  }
]

export {menutoolObj}