app-quick-menus.vue 2.0 KB
Newer Older
RedPing97's avatar
RedPing97 committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14
 <template>
  <div class="app-menus">
    <template v-for="(item,index) in menus">
      <card :bordered="false" dis-hover v-if="item.items && Array.isArray(item.items)" :key="index">
        <p slot="title" @click="$emit('menuClick',item.name, [item.name])">
          <span style="margin-right:12px">
            <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>
          <span>{{$t(`app.menus.${ctrlName}.${item.name}`)}}</span>
          <span class="line"></span>
        </p>
        <p style=" display: 'flex' ">
RedPing97's avatar
RedPing97 committed
15 16
          <app-quick-menus :menus="item.items" :ctrlName="ctrlName"></app-quick-menus>
          </p>
RedPing97's avatar
RedPing97 committed
17
      </card>
RedPing97's avatar
RedPing97 committed
18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
      <card
        :key="index"
        :style=" {
            width:'24%',
            height: '50px',
            wordBreak: 'break-all',
            cursor: 'pointer',
            margin: '6px',
            border:'0',
            padding:'8px',
            display: 'flex',
            alignItems: 'center'
        }"
        :padding="0"
        v-else
      >
        <div @click="$emit('menuClick',item.name, [item.name])">
          <span style="margin-right:12px">
            <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>
          <h4>{{$t(`app.menus.${ctrlName}.${item.name}`)}}</h4>
        </div>
      </card>
    </template>
RedPing97's avatar
RedPing97 committed
44
  </div>
RedPing97's avatar
RedPing97 committed
45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69
</template>
<script lang='ts'>
import { Component, Vue, Prop, Model, Watch } from "vue-property-decorator";

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

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

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

70 71
<style lang='scss'>
@import "./app-quick-menus.scss";
RedPing97's avatar
RedPing97 committed
72
</style>