preliminary/src/common/OptionInp.vue

<!-- 带输入框选项 -->
<template>
  <div :class="['inpbox',{'iptCheck':item.select},{'exclu':exclu}]">
    <img class="iptimg" :src="item.select?url[0]:url[1]" alt="">
    <span class="prefix" v-if="msg.prefix">{{msg.prefix}}</span>
    <!-- <div class="inp" @click="preClick"> -->
      <input :type="msg.type=='number'?'number':'text'" 
              :placeholder="msg.placeholder"
              :style="{'width':!msg.prefix&&!msg.suffix?'90%':'33%'}"
              :disabled="exclu"
              :maxlength="msg.type=='number'?10:''"
              :class="[{'exclu':exclu},{'cancel':item.select==0}]"
              v-model="txt"
              @click="handleCli"
              @blur="handleBlur"
              @focus="focus"
              @input="changeVal">
    <!-- </div> -->
    <span class="suffix" v-if="msg.suffix">{{msg.suffix}}</span>
  </div>
</template>
<script type="text/javascript">
import { getExpStr,isIos} from '@utils/tools';
import $ from 'jquery';
  export default {
    name:'OptionInp',
    data(){
      return{
        msg:{},
        txt:this.item.value || '',
        select:0,
        url:[require('../images/iptselect.png'),require('../images/iptdis.png')]
      }
    },
    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(/^\.$/,'')
        }
        const newData = Object.assign({},this.part,{value:this.txt});
        this.$emit("updata",newData);
        this.$emit('handleInp',this.txt);
        this.$emit('handleSelec');
      },
      handleBlur(){
          // $(".btscroll").css({'position':'fixed'})
        $(".foot").css({'display':'block'})
        document.activeElement.scrollIntoView({behavior: "smooth"})
        document.activeElement.scrollIntoViewIfNeeded(true);
        setTimeout(()=>{
          document.activeElement.scrollIntoViewIfNeeded(true);
        },300)
          // 如果该项未选中，则不存值
        // 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);
      },
      focus(){
        if(isIos()){
          // $(".btscroll").css({'position':'absolute'})
          $(".foot").css({'display':'none'})
        }
      },
      preClick(e){
        e.stopPropagation();
      },
      handleCli(e){
        e.stopPropagation();
        // const select = this.item.select;
        if(!this.select&&this.txt){//聚焦时自动选中该项
          this.$emit('handleSelec');
        } 
      }
    },
    watch:{
      item:{//清空时更新
        handler(newVal,oldVal){
          this.txt = newVal.value;
          this.select = newVal.select;
        },
        deep:true
      }
    },
  }
</script>
<style lang="less" scoped>
@import '../less/base.less';
  .inpbox{
    color:#colors[text];
    display: inline-block;
    width: 100%;
    white-space: normal;
    vertical-align: middle;
    height: .42rem;
    line-height: .42rem;
    .prefix,.suffix{
      display: inline-block;
      vertical-align: middle;
    }
    .iptimg {
      width: .34rem;
      height: .34rem;
      margin-right: .1rem;
      position: relative;
      top: .06rem;
    }
     input{
      height: .42rem;
      color: #4F50FF;
      font-size: .28rem;
      border-bottom: 1px solid #DFE0E4 !important;
      border-radius: 0;
      padding-left: .05rem;
      background-color: transparent;
      height: 0.38rem;
      line-height: 0.38rem;
    }
    .check{//选中
      color: #colors[theme];
    }
    // .inp .exclu{ //互斥
    .exclu{ //互斥
      color:#colors[exclu] !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>