preliminary/src/common/OptionInp.vue

<!-- 带输入框选项 -->
<template>
  <div :class="['inpbox',{'iptCheck':item.select}]">
    <span class="prefix" v-if="msg.prefix">{{msg.prefix}}</span>
    <input :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"
    >
    <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',
    props:['item','inx'],
    data(){
      return{
        msg:{},
        txt:this.item.value||'',
        select:0,
        url:[require('../images/iptselect.png'),require('../images/iptdis.png')]
      }
    },
    mounted(){
      const text = this.item.description || this.item.name;
      this.msg = getExpStr(text);
      this.select = this.item.select;
    },
    methods:{
      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){//已选中后点击输入框不取消选中
          e.stopPropagation();
        }
      }
    },
    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;
      box-sizing: border-box;
       &.cancel{
          color:#ccc ;
        }
    }
  }
.iptCheck{
  span{
    color: #colors[btn];
  }
}
</style>