app-icon-menus.vue 2.2 KB
Newer Older
1
<template>
2
  <div class="app-icon-menus">
3
    <template v-for="(item,index) in menus">
4 5 6
      <template v-if="!item.hidden">
        <div :bordered="false" v-if="item.items && Array.isArray(item.items)" :key="index" :class="item.textcls">
          <p @click="$emit('menuClick',item.name, [item.name])">
7
            <span>{{$t(item.cappslanguageres, item.text)}}</span>
8 9 10 11 12
            <span class="line"></span>
          </p>
          <p style=" display: 'flex' ">
            <app-icon-menus :menus="item.items" :ctrlName = "ctrlName" @menuClick="menuClick"></app-icon-menus>
          </p>
13
        </div>
14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
        <el-card
          :key="index"
          shadow="never"
          :class="item.textcls"
          v-else
        >
          <div @click="menuClick(item.name,[item.name])" class="menuIcon" >
            <span v-if="isIcon(item.icon,item.iconcls)">

              <i :class="item.icon" v-if="!Object.is(item.icon, '')" />
              <i :class="item.iconcls" v-else-if="!Object.is(item.iconcls, '')" />
              <i class="fa fa-cogs" v-else></i>
            </span>
            <span v-else>
              <img :src="item.icon" v-if="!Object.is(item.icon, '')" />
              <img :src="item.iconcls" v-else-if="!Object.is(item.iconcls, '')" />
              <i class="fa fa-cogs" v-else></i>
            </span>
32
            <h4>{{$t(item.cappslanguageres, item.text)}}</h4>
33 34 35
          </div>
        </el-card>
      </template>
36 37 38 39 40 41 42 43 44 45
    </template>
  </div>
</template>

<script lang='ts'>
import { Component, Vue, Prop, Model, Watch } from "vue-property-decorator";

@Component({})
export default class AppQuickMenus extends Vue {

46 47 48 49 50 51 52 53 54
  public isIcon( icon: string,iconcls: string) {
    if (icon.indexOf("fa") == 0 || iconcls.indexOf("fa") == 0) {
      return true;
    }else {
      return false;
    }
    
  }

55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76
  public menuClick(index: any,indexs: any[]) {
    this.$emit("menuClick",index,indexs);
  }

  /**
   * 菜单数据
   *
   * @type {*}
   * @memberof AppQuickMenus
   */
  @Prop({ default: [] }) public menus!: any;

  /**
   *  部件名称
   * 
   * @type {String}
   * @memberof AppQuickMenus
   */
  @Prop() public ctrlName!:String;
}
</script>

77 78
<style lang='scss'>
@import "./app-icon-menus.scss";
79
</style>