preliminary/src/common/OptionInp.vue

<!-- 带输入框选项 -->
<template>
  <div :class="['inpbox',{'iptCheck':item.select}]">
    <span class="prefix" v-if="msg.prefix" @click="stopPop">{{msg.prefix}}</span>
    <p v-if="isXy" class="mult-inps">
      <input :type="msg.type=='number'?'number':'text'"
             :placeholder="placeholders[0]"
             :style="{'width':'45%'}"
             :class="[{'cancel':!item.select}]"
             v-model="ssyTxt"
             @click="handleCli"
             @input="(e)=>changeXyVal(e,'ssyTxt')"
      >/<input :type="msg.type=='number'?'number':'text'"
               :placeholder="placeholders[1]"
               :style="{'width':'45%'}"
               :class="[{'cancel':!item.select}]"
               v-model="szyTxt"
               @click="handleCli"
               @input="(e)=>changeXyVal(e,'szyTxt')"
    >
    </p>
    <input v-if="!isXy" :type="msg.type=='number'?'number':'text'"
            :placeholder="msg.placeholder"
            :style="{'width':!msg.prefix&&!msg.suffix?'90%':'33%'}"
            :class="[{'cancel':item.select==0}]"
           v-model="txt"
           @click="handleCli"
           @input="(e)=>changeVal(e)"
    >
    <span class="suffix" v-if="msg.suffix" @click="stopPop">{{msg.suffix}}</span>
  </div>
</template>
<script type="text/javascript">
import { getExpStr,isIos} from '@utils/tools';
import $ from 'jquery';
  export default {
    name:'OptionInp',
    props:['item','inx','sure'],
    data(){
      return{
        msg:{},
        txt:this.item.value||'',
        select:0,
        placeholders:[],
        isXy:false,   //是否是血压输入框
        ssyTxt:'',    //收缩压
        szyTxt:'',    //舒张压
        url:[require('../images/iptselect.png'),require('../images/iptdis.png')]
      }
    },
    mounted(){
      const text = this.item.description || this.item.name;
      this.msg = getExpStr(text);
      const placeholder=this.msg.placeholder;
      if(placeholder){
        this.placeholders=this.msg.placeholder.split("/");
        this.placeholders.length>1?this.isXy=true:'';
      }
      if(this.txt.indexOf("/")!==-1){
        this.isXy=true;
        const arr = this.txt.split("/");
        this.ssyTxt= arr[0];
        this.szyTxt= arr[1];
      }
      this.select = this.item.select;
    },
    methods:{
      stopPop(e){
        e.stopPropagation();
      },
      changeXyVal(e,flag){    //血压值输入事件
        if(this.msg.type=='number'){//数字键盘
          this[flag] = e.target.value=e.target.value.replace(/^\.$/,'')
        }
        if(this.ssyTxt.match(/\S/g)&&this.szyTxt.match(/\S/g)){//2个都填
          this.txt = this.ssyTxt+"/"+this.szyTxt;
        }else{
          this.txt ='';
        }
        this.$emit('handleInp',this.txt,this.inx);
        
        this.$emit("handleSelect")
      },
      changeVal(e){
        /*const val = e.target.value;
        if(!val.match(/\S/g)){      //只有空白符不算输入
          this.txt='';
        }*/
        if(this.msg.type=='number'){//数字键盘
          this.txt = e.target.value=e.target.value.replace(/^\.$/,'')
        }
        this.$emit('handleInp',this.txt,this.inx);
        const notNull=this.txt.match(/\S/g);
        if(notNull&&!this.item.select||(!notNull&&this.item.select)){
          this.$emit("handleSelect")
        }
      },
      handleBlur(){
       /* if(this.txt){
          this.$emit('handleInp',this.txt,this.inx);
        }*/
        /*setTimeout(()=>{
          $(".foot").css({'display':'block'})
        },150)*/

      },
      handleCli(e){
        if(!this.select&&(this.txt||"").match(/\S/g)){//已选中后点击输入框不取消选中
          this.$emit("handleSelect")
        }
      }
    },
    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: .68rem;
    line-height: .68rem;
    margin-bottom:.08rem;
    .prefix,.suffix{
      display: inline-block;
      vertical-align: middle;
    }
     input{
      height: 100%;
      color: #colors[btn];
      font-size: #font[select];
      border-bottom: 1px solid #E6E6E6 !important;
      border-radius: 0;
      padding-left: .05rem;
      background-color: transparent;
      position: relative;
      /*top: 1px;*/
       vertical-align: middle;
      box-sizing: border-box;
       &.cancel{
          color:#ccc ;
        }
    }
.mult-inps{
  width:70%;
  display: inline-block;
  height:100%;
  /*input{
    width:45%;
  }*/
}
  }
.iptCheck{
  span{
    color: #colors[btn];
  }
}
</style>