血压2个输入框

src/common/OptionInp.vue

@@ -2,13 +2,30 @@
 <template>
   <div :class="['inpbox',{'iptCheck':item.select||item.value}]">
     <span class="prefix" v-if="msg.prefix" @click="stopPop">{{msg.prefix}}</span>
-    <input :type="msg.type=='number'?'number':'text'"
+    <p v-if="isXy" class="mult-inps">
+      <input :type="msg.type=='number'?'number':'text'"
+             :placeholder="placeholders[0]"
+             :style="{'width':'45%'}"
+             :class="[{'cancel':item.select==0}]"
+             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==0}]"
+               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="changeVal"
+           @input="(e)=>changeVal(e)"
     >
     <span class="suffix" v-if="msg.suffix" @click="stopPop">{{msg.suffix}}</span>
   </div>
@@ -24,18 +41,45 @@ import $ from 'jquery';
         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);
+      },
       changeVal(e){
         /*const val = e.target.value;
         if(!val.match(/\S/g)){      //只有空白符不算输入
@@ -107,6 +151,14 @@ import $ from 'jquery';
           color:#ccc ;
         }
     }
+.mult-inps{
+  width:70%;
+  display: inline-block;
+  height:100%;
+  /*input{
+    width:45%;
+  }*/
+}
   }
 .iptCheck{
   span{