preliminary/src/common/Input.vue

<template>
  <div class="inp-wrap" :style="getStyle(detail,slide)">
    <input :type="item.controlType==6?'text':'number'" 
          :class="{'change':borColor}" 
          v-model="val" 
          @input="changeVal" 
          @focus="focus"
          @blur="blur">
  </div>
</template>
<script type="text/javascript">
  import { isIos } from '@utils/tools';
  import $ from 'jquery';
  export default {
    name:'Input',
    props:{
      item:{
        default:''
      },
      slide:{
        default:false,
        type:Boolean
      },
      detail:{
        default:2,
        type:Number||String
      }
    },
    data(){
      return{
        msg:"输入框",
        val: this.item.value || '',
        borColor:false
      }
    },
    methods:{
      getStyle(detail,slide){
        if(detail == 1){
          if(slide){
            return {'display':'block','background-color': '#F9F9F9'}
          }else{
            return {'display':'none'}
          }
        }else{
          return {'display':'block'}
        }
      },
      changeVal(e){
        this.borColor = true;
        if(this.item.controlType==7){//数字键盘
            this.val = e.target.value=e.target.value.replace(/^\.$/,'').slice(0,10)
        }
        this.borColor = false;
        const newData = Object.assign({},this.item,{value:this.val,valueP:this.val});
        this.$emit("updata",newData);
      },
      blur(){
        setTimeout(()=>{
          $(".foot").css({'display':'block'})
        },150)
        // this.borColor = false;
        // const newData = Object.assign({},this.item,{value:this.val,valueP:this.val});
        // this.$emit("updata",newData);
      },
      focus(e){
        if(isIos()){
          setTimeout(() => {
            $(".foot").css({'display':'none'})
          }, 150);
        }
      }
    },
    watch:{
      item:{
        handler(newVal,oldVal){
          this.val = newVal.value;
        },
        deep:true
      }
    }
  }
</script>
<style lang="less" scoped>
@import '../less/base.less';
  .inp-wrap{
    .bgques;    
    padding-bottom: 0;
    input{
      width: 100%;
      color: #colors[theme];
      font-size: .3rem;
      border: 0 none;
      border-bottom: 1px solid #DFE0E4;
      margin-bottom: .3rem;
      border-radius: 0;
      outline-color: invert;
      padding-left: 0.1rem;
      box-sizing: border-box;
      // background: #fff;
      background: transparent;
    }
    .change{
      border-color:  #colors[theme];
    }
  }
</style>