preliminary/src/common/MultiLineInput.vue

<template>
  <div :style="{'margin-bottom':isLast?'0':'.3rem'}" :class="['multipIpt',{'border':border,'inline':inline,'check':select}]">
    <span class="prefix" v-if="content.prefix">{{content.prefix}}</span>
    <div class="sticP" :style="{paddingRight:content.suffix?'1rem':'0'}">
        <div class="iptWrap">
          <template v-for="(item,idx) in content.iptLis">
            <input v-if="content.iptLis.length>1" 
              class="contentVal" 
              :type="content.type=='number'?'number':'text'" 
              :style="{'width':1/content.iptLis.length*100-3+'%'}" 
              :key="item.placeholder+idx" 
              v-model="item.value"
              :placeholder="item.placeholder"
              @input="changeVal($event,idx,content.type)" 
              @blur="blur"
              @focus="focus"
              :maxlength="content.type=='number'?10:''"
              @click="handleClick">
            <input v-show="content.iptLis.length==1" class="contentVal" 
              :type="content.type=='number'?'number':'text'" 
              :placeholder="content.placeholder" 
              v-model="item.value"
              @input="changeVal($event,idx,content.type)" 
              @blur="blur"
              @focus="focus"
              :maxlength="content.type=='number'?10:''"
              @click="handleClick">
            <span v-if="idx == 0&&content.iptLis.length>1">/</span>
          </template>
        </div>
    </div>
    <span class="suffix" v-if="content.suffix">{{content.suffix}}</span>
  </div>
</template>
<script>
import { getModelExpStr,isIos } from '@utils/tools';
import $ from 'jquery';

export default {
  props:{
    msg:{
      default:'',
      type:String
    },
    part:{
      type:Object,
      require: true
    },
    border:{//最外层边框
      default:true,
      type:Boolean
    },
    inline:{ //是否行内元素
      default:false,
      type:Boolean
    },
    select:{ //是否选中
      default:false,
      type:Boolean
    },
    isLast:{ //是否为最后一个
      default:false,
      type:Boolean
    },
  },
  data(){
    return {
      content:{},
      txt:this.part.value || '', //回读用
      tmpArr:[]
    }
  },
  mounted(){
    this.content = getModelExpStr(this.msg,this.txt)
  },
  methods:{
    changeVal(e,num,type){
      let tmpTxt = '',arr=this.tmpArr
      document.activeElement.scrollIntoViewIfNeeded(true);
      if(type == 'number'){
        e.currentTarget.value = e.currentTarget.value.replace(/^\.$/,'')
      }
      arr[num]=e.currentTarget.value
      tmpTxt=arr.join('/')
      this.txt = tmpTxt
      this.content = getModelExpStr(this.msg,this.txt)
      // this.$emit('changeMultipVal',e.currentTarget.value,num)
      const select = this.part.select;
      // if(!select){return}
      const newData = Object.assign({},this.part,{value:this.txt,controlType:3,valueP:this.txt});
      this.$emit("updata",newData);
      this.$emit('handleInp',this.txt);
    },
    blur(){
      // 如果该项未选中，则不存值
      // $(".btscroll").css({'position':'fixed'})
      $(".foot").css({'display':'block'})
      document.activeElement.scrollIntoView({behavior: "smooth"})
      document.activeElement.scrollIntoViewIfNeeded(true);
      setTimeout(()=>{
        document.activeElement.scrollIntoViewIfNeeded(true);
      },300)
    },
    focus(){
      if(isIos()){
          // $(".btscroll").css({'position':'absolute'})
        $(".foot").css({'display':'none'})
      }
    },
    handleClick(e){
      // 点击输入框时不选中该项
      // document.activeElement.scrollIntoViewIfNeeded(true);
      e.stopPropagation();
    }
  },
  watch:{
      part:{//清空时更新
        handler(newVal,oldVal){
          this.txt = newVal.value;
          this.content = getModelExpStr(this.msg,this.txt)
        },
        deep:true
      }
    },
}
</script>
<style lang="less" scoped>
@import '../less/base.less';
  .multipIpt {
    width: 100%;
    // height: .74rem /* 74/100 */;
    line-height: .74rem /* 74/100 */;
    // border: 1px solid #DFE0E4;
    // border-radius: .08rem /* 8/100 */;
    padding: 0 .12rem 0 .26rem;
    box-sizing: border-box;
    position: relative;
    margin-bottom: .3rem;
    .contentVal {
      font-size: .3rem /* 30/100 */;
      color: #colors[theme];
      text-align: left;
      border: 0 none;
      // border-bottom: 1px solid #b0afaf !important;
      border-radius: 0;
      // background-color: #fff;
      background: transparent;
      outline-color: invert;
      height: .38rem;
      line-height: .38rem;
      width: 100%;
      padding:0 0.1rem;
      box-sizing: border-box;
    }
  }
  .border{
    border: 1px solid #DFE0E4;
    border-radius: 2rem
  }
  .inline{
    display: inline-block;
    vertical-align: middle;
    color: #colors[text];
    padding: 0;
    margin:0;
    height: auto /* 74/100 */;
    line-height: .36rem /* 74/100 */;
  }
  .prefix {
    float: left;
    color: #666;
    line-height: .72rem;
  }
  .suffix {
    position: absolute;
    right: .1rem;
    top: .2rem;
    width: 1rem;
    text-align: right;
    text-align: left;
    color: #666;
    line-height: .36rem;
  }
  .sticP {
    width: 100%;
    padding-right: 1rem;
    box-sizing: border-box;
    .iptWrap {
      // width: 100%;
      position: relative;
      overflow: hidden;
      min-width: 1rem;
      span {
        color: #666;
      }
    }
  }
  .check{
    color: #colors[theme];
  }
</style>