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

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

<script lang="ts">
/*
config:{
  attr:{
    type:'text, number(数字), integer（整数）,textarea,float（小数）,password(密码)',
    align:'left, center, right'
    prefixIcon:''  //头部图标
    suffixIcon:''  //尾部图标
  }
}
*/
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){
    this.setValue(v);
  }

  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>

<style lang="scss">
.el-input--small{
  font-size: 14px !important;
}
.vxe-input--inner[disabled]{
  background-color: #F5F7FA;
  border-color: #dfe4ed;
  color: #C0C4CC;
  cursor: not-allowed;
}
</style>