app-header-menus.vue

<template>
  <div class="app-header-menus">
    <div v-for="menu in menus" class="app-header-menu-item text" @click="openWindow(menu)">
      <div class="app-header-menu-item-icon">
        <i :class="menu.iconcls" :aria-hidden="true" />
      </div>
      <div class="app-header-menu-item-text">{{$t(menu.title)}}</div>

    </div>
  </div> 
</template>

<script lang="ts">
import { Vue, Component, Prop, Model, Emit } from "vue-property-decorator";
import { Subject } from "rxjs";
import { Environment } from '@/environments/environment';

@Component({
    i18n: {
        messages: {
            'zh-CN': {
                menus: {
                    ibizlab:{
                        title: 'iBiz开放平台',
                    },
                    publishProject:{
                        title: '项目文件',
                    },
                    ibizstudio:{
                        title: '模型设计工具',
                    },
                    ibizbbs:{
                        title: 'iBiz论坛',
                    },
                }
            },
            'en-US': {
                menus: {
                    ibizlab:{
                        title: 'iBizLab',
                    },
                    publishProject:{
                        title: 'Publish Project',
                    },
                    ibizstudio:{
                        title: 'Model Design Tools',
                    },
                    ibizbbs:{
                        title: 'iBizBBS',
                    },
                }
            }
        }
    }
})
export default class AppHeaderMenus extends Vue {

  /**
   * 菜单数据
   * 
   * @type {any}
   * @memberof AppHeaderMenus
   */
  public menus:any = [
      {
          name: "ibizlab",
          title: "menus.ibizlab.title",
          url: Environment.ibizlabtUrl,
          iconcls: 'fa fa-home',
      },
      {
          name: "publishProject",
          title: "menus.publishProject.title",
          url: Environment.PublishProjectUrl,
          iconcls: 'fa fa-folder-open-o',
      },
      {
          name: "ibizstudio",
          title: "menus.ibizstudio.title",
          url: `${Environment.StudioUrl}?#/common_slnindex/srfkeys=${Environment.DCId}/sysdesign_psdevslnsysmodeltreeexpview`,
          iconcls: 'fa fa-wrench',
      },
      {
          name: "ibizbbs",
          title: "menus.ibizbbs.title",
          url: Environment.ibizbbstUrl,
          iconcls: 'fa fa-comments-o',
      },
  ];

  /**
   * 触发界面行为
   * 
   * @memberof AppHeaderMenus
   */
  public openWindow(menu:any){
      window.open(menu.url, '_blank');
  }


}
</script>

<style lang='less'>
@import "./app-header-menus.less";
</style>