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>