github.com/easysoft/zendata@v0.0.0-20240513203326-705bd5a7fd67/ui/src/layout/Navbar.vue (about)

     1  <template>
     2    <div class="navbar">
     3      <a-menu
     4          :default-selected-keys="['mine']"
     5          :selected-keys="[selectedKey]"
     6          :open-keys.sync="openKeys"
     7          mode="horizontal"
     8          @click="handleClick"
     9      >
    10        <a-menu-item key="/data/mine/list" class="link">
    11          <Icon type="database" :style="{fontSize: '16px'}" />{{$t('msg.mine')}}
    12        </a-menu-item>
    13        <a-menu-item key="/data/buildin/config/list" class="link">
    14          <Icon type="build" :style="{fontSize: '16px'}" />{{$t('msg.buildin')}}
    15        </a-menu-item>
    16  <!--      <a-menu-item key="/mock/index" class="link">
    17          <Icon type="cloud-server" :style="{fontSize: '16px'}" />{{$t('menu.data.mock')}}
    18        </a-menu-item>-->
    19      </a-menu>
    20    </div>
    21  </template>
    22  
    23  <script>
    24  import {Icon} from 'ant-design-vue'
    25  
    26  export default {
    27    name: 'Navbar',
    28    components: {
    29      Icon,
    30    },
    31    data () {
    32      return {
    33        current: [],
    34        openKeys: [],
    35      };
    36    },
    37    computed: {
    38      selectedKey: function() {
    39        console.log(this.$route.path)
    40        const arr = this.$route.path.split('/')
    41  
    42        if (arr[2] === 'mine') {
    43          return '/data/mine/list'
    44        } else if (arr[2] === 'buildin') {
    45          return '/data/buildin/config/list'
    46        } else if (arr[1] === 'mock') {
    47          return '/mock/index'
    48        }
    49  
    50        return ''
    51      }
    52    },
    53    watch: {
    54      openKeys(val) {
    55        console.log('openKeys', val);
    56      },
    57    },
    58    methods: {
    59      handleClick (e) {
    60        console.log('handleClick', e, this.$route.path, e.key)
    61        if (e.key.indexOf('buildin') > -1) this.openKeys = ['buildin']
    62  
    63        const path =  e.key
    64        if (this.$route.path != path) this.$router.push(path);
    65      },
    66    }
    67  }
    68  </script>
    69  
    70  <style lang="less" scoped>
    71  .navbar {
    72    link {
    73      cursor: pointer;
    74    }
    75  }
    76  </style>