app-panel-field.vue

<template>
    <div :class="classes">
        <div v-if="Object.is(labelPos,'NONE') || !labelPos" class="app-panel-field__editor">
            <div :class="valueCheck == true ?'':'editorstyle'">
              <slot ></slot>
              <span :class="error ? 'errorstyle':''">{{error}}</span>
            </div>
        </div>
        <div v-if="!Object.is(labelPos,'NONE') && !isEmptyCaption" :class="dynaCationClass">
            <span v-if="required">* </span>
            {{ caption }}
        </div>
        <div v-if="Object.is(labelPos,'BOTTOM') || Object.is(labelPos,'TOP') || Object.is(labelPos,'LEFT') || Object.is(labelPos,'RIGHT')" class="app-panel-field__editor">
          <div :class="valueCheck == true ?'':'editorstyle'">
            <slot ></slot>
            <span :class="error ? 'errorstyle':''">{{error}}</span>
          </div>
        </div>
    </div>
</template>
<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";

@Component({})
export default class AppPanelField extends Vue {
  /**
   * 名称
   *
   * @type {string}
   * @memberof AppPanelField
   */
  @Prop() public caption!: string;

  /**
   * 错误信息
   *
   * @type {string}
   * @memberof AppPanelField
   */
  @Prop() public error?: string;

  /**
   * 标签位置
   *
   * @type {(string | 'BOTTOM' | 'LEFT' | 'NONE' | 'RIGHT' | 'TOP')}
   * @memberof AppPanelField
   */
  @Prop() public labelPos?:
    | string
    | "BOTTOM"
    | "LEFT"
    | "NONE"
    | "RIGHT"
    | "TOP";

  /**
   * 标签是否空白
   *
   * @type {boolean}
   * @memberof AppPanelField
   */
  @Prop() public isEmptyCaption?: boolean;

  /**
   * 列表项名称
   *
   * @type {string}
   * @memberof AppPanelField
   */
  @Prop() public name!: string;

  /**
   * 面板数据
   *
   * @type {any}
   * @memberof AppPanelField
   */
  @Prop() public data!: any;

  /**
   * 编辑器值
   *
   * @type {any}
   * @memberof AppPanelField
   */
  @Prop() public value !: any;

  /**
   * 值规则
   *
   * @type {string}
   * @memberof AppPanelField
   */
  @Prop() public itemRules!: any;
  
  /**
   * 值规则
   *
   * @type {string}
   * @memberof AppPanelField
   */
  @Prop() public captionClass?: any;
  
  /**
   * 是否必填
   *
   * @type {boolean}
   * @memberof AppPanelField
   */
  @Prop({default: false}) public required!: boolean;

  /**
   * 动态标题类名
   *
   * @type {any[]}
   * @memberof AppPanelField
   */
  get dynaCationClass(){
    const defaultClass = {'app-panel-field__label':true}
    return this.captionClass?Object.assign(defaultClass,this.captionClass):defaultClass;
  }


  /**
   * 值规则数组
   *
   * @type {any[]}
   * @memberof AppPanelField
   */
  public rules: any[] = [];

  /**
   * 值规则监控
   *
   * @param {*} newVal
   * @param {*} oldVal
   * @memberof AppPanelField
   */
  @Watch("itemRules", { deep: true })
  onItemRulesChange(newVal: any, oldVal: any) {
    if (newVal) {
      try {
        this.rules = [];
        const _rules: any[] = newVal;
        this.rules = [..._rules];
      } catch (error) {}
    }
  }

  /**
   * 编辑器样式
   *
   * @type {boolean}
   * @memberof AppPanelField
   */
  public valueCheck: boolean = true;

  /**
   * 编辑器值监控
   *
   * @param {*} newVal
   * @param {*} oldVal
   * @memberof AppPanelField
   */
  @Watch("value")
  ItemValueRules(newVal: any, oldVal: any) {
    if(this.required && !newVal) {
        this.valueCheck = false;
    }else{
        this.valueCheck = true;
    }
  }

  /**
   * 计算样式
   *
   * @readonly
   * @type {string []}
   * @memberof AppPanelField
   */
  get classes(): string[] {
    let posClass = "";
    switch (this.labelPos) {
      case "TOP":
        posClass = "label__top";
        break;
      case "LEFT":
        posClass = "label__left";
        break;
      case "BOTTOM":
        posClass = "label__bottom";
        break;
      case "RIGHT":
        posClass = "label__right";
        break;
      case "NONE":
        posClass = "label__none";
        break;
    }
    return [ "app-panel-field", posClass ];
  }

  /**
   * vue 生命周期
   *
   * @memberof AppPanelField
   */
  public mounted() {
    if (this.itemRules) {
      try {
        const _rules: any[] = this.itemRules;
        this.rules = [..._rules];
        this.rules.some((rule: any) => {
          if (rule.hasOwnProperty("required")) {
            this.required = rule.required;
            return true;
          }
          return false;
        });
      } catch (error) {}
    }
  }
}
</script>