<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' "> <app-quick-menus :menus="item.items" :ctrlName="ctrlName"></app-quick-menus> </p> </card> <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> </div> </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> <style lang='scss'> @import "./app-quick-menus.scss"; </style>