<template> <div :class="curClassName" :style="curStyle"> <el-input v-model="curValue" :placeholder="placeholder"></el-input> </div> </template> <script lang="ts"> import { Vue, Component, Prop } from 'vue-property-decorator'; @Component({}) export default class AppPresetTextInput extends Vue { /** * 输入值 * * @type {*} * @memberof AppPresetTextInput */ @Prop() public value!: any; /** * 名称 * * @type {string} * @memberof AppPresetTextInput */ @Prop() public name!: string; /** * 布局模型详情 * * @type {*} * @memberof AppPresetTextInput */ @Prop() public layoutModelDetails: any; /** * 下标 * * @type {number} * @memberof AppPresetTextInput */ @Prop() public index?: number; /** * 项名称 * * @type {*} * @memberof AppPresetTextInput */ get itemName() { return (this.index || this.index === 0) ? `${this.name}_${this.index}` : this.name; } /** * 类名 * * @memberof AppPresetSwitch */ get curClassName() { const layoutModel = this.layoutModelDetails[this.itemName]; if (layoutModel) { return `app-preset-text-input ${this.itemName} ${layoutModel.sysCss}`; } } /** * 禁用 * * @memberof AppPresetSwitch */ get disabled() { const layoutModel = this.layoutModelDetails[this.itemName]; if (layoutModel) { return layoutModel.disabled; } } /** * 当前容器样式 * * @memberof AppPresetSwitch */ get curStyle() { const layoutModel = this.layoutModelDetails[this.itemName]; if (layoutModel) { return layoutModel.getElementStyle(); } } /** * 占位提示 * * @memberof AppPresetSwitch */ get placeholder() { const layoutModel = this.layoutModelDetails[this.itemName]; if (layoutModel) { return layoutModel.placeholder || ''; } } /** * 当前值 * * @memberof AppPresetTextInput */ get curValue() { return this.value; } /** * 值变化 * * @memberof AppPresetTextInput */ set curValue(val: any) { this.$emit('valueChange', { name: this.name, value: val }); } } </script> <style lang='scss'> @import './app-preset-text-input.scss'; </style>