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"
              
              :class="[{'exclu':exclu},{'cancel':item.select==0}]"
              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,isIos} from '@utils/tools';
  export default {
    name:'OptionInp',
    data(){
      return{
        msg:{},
        txt:this.item.value || '',
        select:0
      }
    },
    props:['item','exclu'],
    mounted(){
      const text = this.item.description || this.item.name;
      this.msg = getExpStr(text);
      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(){
        document.activeElement.scrollIntoViewIfNeeded(true);
          // 如果该项未选中，则不存值
        // 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){
        // const select = this.item.select;
        if(!this.select){//聚焦时自动选中该项
          this.$emit('handleSelec');
        }
        if(!isIos()){
          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;
      // position: relative;
      // top:1px;
      input{
        color: #4F50FF;
        font-size: .28rem;
        border-bottom: 1px solid #DFE0E4 !important;
        border-radius: 0;
        padding-left: .05rem;
      }
    }
    .check{//选中
      color: #4F50FF;
    }
    .inp .exclu{ //互斥
      color:#e6e7e9 !important;
    }
    .cancel{ //取消
      color: #bbbbbb !important;
    }
    input:disabled, input[disabled]{
      background:transparent;
      border-bottom-color: #DEDEDE !important;
    }
    // input:disabled,input[disabled]::-webkit-input-placeholder{
    .exclu::-webkit-input-placeholder{
      color:#e6e7e9 !important;
    }
  }
</style>