<template> <div :class="curClassName" :style="curStyle"> <app-breadcrumb :navModel="navModel" :indexViewTag="indexViewTag"></app-breadcrumb> </div> </template> <script lang="ts"> import { Component, Inject, Prop, Vue } from "vue-property-decorator"; @Component({}) export default class AppIndexNavBreadcrumb extends Vue { /** * 名称 * * @type {string} * @memberof AppIndexNavBreadcrumb */ @Prop() public name!: string; /** * 布局模型详情 * * @type {*} * @memberof AppIndexNavBreadcrumb */ @Prop() public layoutModelDetails: any; /** * 首页视图标识 * * @type {*} * @memberof AppIndexNavBreadcrumb */ @Prop() public indexViewTag?: string; /** * 视图默认使用 * * @type {string} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ @Inject({ from:'navModel', default: 'tab' }) public navModel!: string; /** * 当前布局模型 * * @type {*} * @memberof AppIndexNavBreadcrumb */ public currentLayoutModel: any; /** * 当前容器类名 * * @memberof AppIndexNavBreadcrumb */ get curClassName() { return { 'app-index-nav-breadcrumb': true, [this.name]: true, [this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false } } /** * 当前容器样式 * * @memberof AppIndexNavBreadcrumb */ get curStyle() { if (this.currentLayoutModel) { return this.currentLayoutModel.getElementStyle(); } return ''; } /** * Vue生命周期 --- created * * @memberof AppIndexNavBreadcrumb */ created() { this.currentLayoutModel = this.layoutModelDetails[this.name]; } } </script> <style lang='less'> @import './app-index-nav-breadcrumb.less'; </style>