preliminary/src/common/MultiLineInput.vue

<template>
  <div :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">
          <input class="contentVal" :type="content.type" :placeholder="content.placeholder" v-model="txt" @input="changeVal" @blur="blur">
        </div>
    </div>
    <span class="suffix" v-if="content.suffix">{{content.suffix}}</span>
  </div>
</template>
<script>
import { getModelExpStr } from '@utils/tools';

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
    },
    value:{ //回读的值
      default:'',
      type:String
    }
  },
  data(){
    return {
      content:{},
      txt:this.part.value || '', //回读用
      val:this.value
    }
  },
  mounted(){
    this.content = getModelExpStr(this.msg)
  },
  methods:{
    changeVal(){
      this.$emit('changeMultipVal',this.txt)
    },
    blur(){
      const newData = Object.assign({},this.part,{value:this.txt,controlType:3});
      this.$emit("updata",newData);
      this.$emit('handleInp',this.txt)
    }
  }
}
</script>
<style lang="less" scoped>
  .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: .3rem 0;
    .contentVal {
      font-size: .3rem /* 30/100 */;
      color: #4F50FF;
      text-align: left;
      border: 0 none;
      border-bottom: 1px solid #b0afaf !important;
      border-radius: 0;
      background-color: #fff;
      outline-color: invert;
      height: .36rem;
      line-height: .36rem;
      width: 100%;
      padding:0 0.1rem;
      box-sizing: border-box;
    }
  }
  .border{
    border: 1px solid #DFE0E4;
    border-radius: .08rem
  }
  .inline{
    display: inline-block;
    vertical-align: middle;
    color: #7C828E;
    padding: 0;
    margin:0;
    height: auto /* 74/100 */;
    line-height: .36rem /* 74/100 */;
  }
  .prefix {
    float: left;
  }
  .suffix {
    position: absolute;
    right: .12rem;
    top: 0;
    width: 1rem;
    text-align: right;
    text-align: left;
  }
  .sticP {
    width: 100%;
    // position: relative;
    padding-right: 1rem;
    box-sizing: border-box;
    .iptWrap {
      // width: 100%;
      position: relative;
      overflow: hidden;
    }
  }
  .check{
    color: #4F50FF;
  }
</style>