preliminary/src/common/Input.vue

<template>
  <div class="inp-wrap">
    <input :type="item.controlType==6?'text':'number'" 
          :class="{'change':borColor}" 
          v-model="val" 
          @input="changeVal" 
          @blur="blur">
  </div>
</template>
<script type="text/javascript">
  export default {
    name:'Input',
    data(){
      return{
        msg:"输入框",
        val: this.item.value || '',
        borColor:false
      }
    },
    props:['item'],
    methods:{
      changeVal(){
        this.borColor = true;
      },
      blur(){
        this.borColor = false;
        const newData = Object.assign({},this.item,{value:this.val});
        this.$emit("updata",newData);
      }
    },
    watch:{
      item:{
        handler(newVal,oldVal){
          this.val = newVal.value;
        },
        deep:true
      }
    }
  }
</script>
<style lang="less" scoped>
  .inp-wrap{
    input{
      width: 100%;
      color: #4F50FF;
      font-size: .3rem;
      border: 0 none;
      // border-bottom: 1px solid #7C828E;
      border-bottom: 1px solid #DFE0E4;
      margin-bottom: .3rem;
      border-radius: 0;
      outline-color: invert;
      padding-left: 0.1rem;
      box-sizing: border-box;
      background: transparent;
    }
    .change{
      border-color:  #4F50FF;
    }
  }
</style>