preliminary/src/common/OptionInp.vue

<!-- 带输入框选项 -->
<template>
  <div :class="['inpbox',{'check':item.select},{'exclu':exclu}]">
    <span class="prefix" v-if="msg.prefix">{{msg.prefix}}</span>
    <div class="inp" @click="preClick">
      <input :type="msg.type=='number'?'tel':'text'" 
              :placeholder="msg.placeholder"
              :disabled="select!=1"
              :class="{'exclu':exclu}"
              v-model="txt"
              @click="handleCli"
              @blur="handleBlur"
              @input="changeVal">
    </div>
    <span class="suffix" v-if="msg.suffix">{{msg.suffix}}</span>
  </div>
</template>
<script type="text/javascript">
import { getExpStr,scrollToV} from '@utils/tools';
  export default {
    name:'OptionInp',
    data(){
      return{
        msg:{},
        txt:this.item.value || '',
        select:0
      }
    },
    props:['item','exclu'],
    mounted(){
      this.msg = getExpStr(this.item.name);
      this.select = this.item.select;
    },
    methods:{
      changeVal(e){
        if(this.msg.type=='number'){//数字键盘
          this.txt = e.target.value=e.target.value.replace(/[^\d]/g,'')
        }
      },
      handleBlur(){
        // 如果该项未选中，则不存值
      // const select = this.item.select;
      // if(!select){return}
      const newData = Object.assign({},this.part,{value:this.txt});
      this.$emit("updata",newData);
      this.$emit('handleInp',this.txt);
      },
      preClick(e){
        e.stopPropagation();
      },
      handleCli(e){
        scrollToV(e)
      }
    },
    watch:{
      item:{//清空时更新
        handler(newVal,oldVal){
          this.txt = newVal.value;
          this.select = newVal.select;
        },
        deep:true
      }
    },
  }
</script>
<style lang="less" scoped>
  .inpbox{
    color:#7C828E;
    display: inline-block;
    .inp{
      display: inline-block;
      vertical-align: top;
      input{
        color: #4F50FF;
        font-size: .3rem;
        border-bottom: 1px solid #DFE0E4 !important;
        border-radius: 0;
        padding-left: .05rem;
      }
    }
    .check{
      color: #4F50FF;
    }
    .exclu{
      color:#e6e7e9 !important;
    }
  }
</style>