<template> <h1 :class="curClassName" :style="curStyle">{{ curValue }}</h1> </template> <script lang="ts"> import { Environment } from "@/environments/environment"; import { Vue, Component, Prop } from 'vue-property-decorator'; @Component({}) export default class AppPresetTitle extends Vue { /** * 名称 * * @type {string} * @memberof AppPresetTitle */ @Prop() public name!: string; /** * 布局模型详情 * * @type {*} * @memberof AppPresetTitle */ @Prop() public layoutModelDetails: any; /** * 下标 * * @type {number} * @memberof AppPresetTitle */ @Prop() public index?: number; /** * 项名称 * * @type {*} * @memberof AppPresetTitle */ get itemName() { return (this.index || this.index === 0) ? `${this.name}_${this.index}` : this.name; } /** * 类名 * * @memberof AppPresetTitle */ get curClassName() { const layoutModel = this.layoutModelDetails[this.itemName]; if (layoutModel) { return `app-preset-title ${this.itemName} ${layoutModel.sysCss}`; } } /** * 当前容器样式 * * @memberof AppPresetTitle */ get curStyle() { const layoutModel = this.layoutModelDetails[this.itemName]; if (layoutModel) { return layoutModel.getElementStyle(); } } /** * 当前值 * * @memberof AppPresetTitle */ public curValue: string = ''; /** * 初始化 * * @memberof AppPresetTitle */ public created() { this.curValue = Environment.AppTitle; } } </script> <style lang='less'> @import './app-preset-title.less'; </style>