平铺型输入组件混入

import { Component, Vue, Prop } from 'vue-property-decorator';
import { defaultNotEmpty } from '.';
import { isEqual } from 'lodash';
@Component
export class PropertyComponentBase extends Vue {
  @Prop({ default: false })
  disabled!: boolean;

  @Prop()
  defaultValue!: any;

  @Prop()
  value!: any;

  @Prop()
  maxLength!: number;

  @Prop()
  validError!: boolean;

  @Prop()
  title!: boolean;

  @Prop()
  getValueValidateErrorMessage!: Function;

  @Prop()
  isNotEmpty!: any;

  //是否展示错误文案
  @Prop()
  showErrorText!: boolean;

  @Prop()
  emptyErrorText!: string;

  //当前处于批量设计模式，批量设计下某些组件要更换渲染逻辑
  @Prop()
  batchMode!: boolean;

  get errorText() {
    if (!this.showErrorText) {
      return '';
    }

    if (this.validError) {
      return this.requiredErrorText || this.valuePatternErrorText;
    } else {
      return this.valuePatternErrorText;
    }
  }

  get requiredErrorText() {
    const emptyErrorText = this.emptyErrorText || `${this.title}不能为空`;
    if (typeof this.isNotEmpty === 'function' && !this.isNotEmpty(this.value)) {
      return emptyErrorText;
    } else if (!this.isNotEmpty && !defaultNotEmpty(this.value)) {
      return emptyErrorText;
    }
    return '';
  }

  get valuePatternErrorText() {
    if (
      typeof this.getValueValidateErrorMessage === 'function' &&
      this.getValueValidateErrorMessage({ value: this.value })
    ) {
      return this.getValueValidateErrorMessage({ value: this.value });
    } else {
      return '';
    }
  }

  mounted() {
    if (
      this.defaultValue !== undefined &&
      !isEqual(this.value, this.defaultValue)
    ) {
      //初始值的赋值只有在默认值与当前值不相等时才能进行，不然可能引发一些无用的监听逻辑
      if (this.isNotEmpty && typeof this.isNotEmpty === 'function') {
        if (!this.isNotEmpty(this.value)) {
          this.onValueChange(this.defaultValue);
        }
      } else if (!defaultNotEmpty(this.value)) {
        this.onValueChange(this.defaultValue);
      }
    }
  }

  onValueChange(newVal) {
    this.$emit('change', newVal);
  }

  //将数据保存在controller上，做缓存
  saveCacheData(key, value) {
    this.$emit('save', key, value);
  }

  otherValueChange(key, value) {
    this.$emit('otherValueChange', key, value);
  }

  //触发一次初始化的propertyChange事件
  initPropertyChange() {
    this.$emit('initPropertyChange');
  }
}

• 有用（6）
• 没有用（0）

本文链接：https://open.hetusaas.com/?id=29