oms/src/benyun/components/byInput/byInput.vue

<template>
  <el-input 
    v-model="value"
    :placeholder="placeholder"
    :maxlength="attrs.maxlength"
    :minlength="attrs.minlength"
    :show-word-limit="attrs.showWordLimit"
    :clearable="attrs.clearable"
    :show-password="attrs.showPassword"
    :disabled="attrs.disabled"
    :size="attrs.size"
    :type="attrs.type"
    :prefix-icon="attrs.prefixIcon"
    :suffix-icon="attrs.suffixIcon"
    :rows="attrs.rows"
    :readonly="attrs.readonly"
    @input="onChange"
    @clear="onChange"
    ></el-input>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import VueViews from '@/benyun/compVue/VueViews'
@Component
export default class ByInput extends VueViews {
  value:any=null;

  @Watch('propValue')
  propValueChange(v:any){
    if(v){
      this.value = (this as any).$lodash.cloneDeep(v);
      if(this.attrs.type == 'number'){
        this.value = Number(v);
      }
    }else{
      this.value = null;
    }
  }

  created(){
    if(this.propConfig){
      this.setConfig(this.propConfig)
    }
    if(this.propValue){
      this.setValue(this.propValue)
    }
    if(this.attrs.defaultValue && !this.value){
      this.setValue(this.attrs.defaultValue);
      this.onChange();
    }
  }
  get placeholder(){
    if(this.attrs.disabled){
      return ''
    }
    if(this.attrs.placeholder){
      return this.attrs.placeholder
    }
    return '请输入内容'
  }
  mounted(){
  }

  setValue(data:any){
    if(data){
      this.value = (this as any).$lodash.cloneDeep(data);
      if(this.attrs.type == 'number'){
        this.value = Number(data);
      }
    }else{
      this.value = null;
    }
  }

  getValue(){
    return (this as any).$lodash.cloneDeep(this.value);
  }

  // 清空数据
  clearValue(){
    this.value = ''
  }

  onChange(){
    this.$emit('onChange',this.value);
  }
}
</script>

<style lang="scss" scoped>

</style>