gdy_app_8/src/components/NumberInput.vue

<template>
  <van-cell
    :title="title"
    :label="label"
    :icon="icon"
    :url="url"
    :border="border"
    :required="required"
    :id="com_id"
    :class="{'v-input': show_dept_selector}"
  >
    <template slot="right-icon">
      <div class="picker-box" @click="activeIsAdd" v-if="chosePoint&&!isForbidSet">
        <div :class="isAdd? 'picker-right':'picker-left'" class="yuan"></div>
        <div class="flex-box flex-v-ce">
          <span class="red flex-1">奖</span>
          <span class="green flex-1">扣</span>
        </div>
      </div>
    </template>
    <template slot="default">
     <div class="flex-box-ce">
          <span v-if="isAdd" class="red">+</span>
          <span v-else class="green">-</span>
          <van-field  style="padding: 0.1rem 0;" @input="onInput" type="digit" :readonly="onReadonly" @blur="onBlur"  v-model.number="numVal" placeholder="分值"/>
      </div>
<!--     <div @click.stop="show_keyboard">
        <span v-if="input_value > 0" class="red">+</span>
        <span v-if="input_value < 0" class="green">-</span>
        <span v-if="input_value == 0 && isAdd" class="red">+</span>
        <span v-if="input_value == 0 && !isAdd" class="green">-</span>
        <span v-if="input_value > 0" class="red">{{input_value}}</span>
        <span v-if="input_value < 0" class="green">{{input_value * -1}}</span>
        <span v-if="input_value == 0">{{input_value}}</span>
        <span v-show="show_dept_selector" class="v-focus">|</span>
      </div> -->
    </template>
<!--    <van-number-keyboard
      :id="com_id"
      class="diy-key"
      ref="selector"
      theme="custom"
      :maxlength="maxlength"
      :show.sync="show_dept_selector"
      close-button-text="完成"
      @blur="onBlur"
      @input="confirm"
      @delete="onDelete"
    >
    </van-number-keyboard> -->
  </van-cell>
</template>

<script>
import Vue from 'vue'
import { NumberKeyboard } from 'vant'
Vue.use(NumberKeyboard)
export default {
  name: 'NumberInput',
  model: {
    prop: 'input_value',  //别名
    event: 'value'  //事件
  },
  props: {
    chosePoint: { //能否输出负分
      type: Boolean,
      default: true
    },
    input_value: {
      default: 0
    },
    title: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: ''
    },
    url: {
      type: String,
      default: ''
    },
    border: {
      type: Boolean,
      default: true
    },
    required: {
      type: Boolean,
      default: false
    },
    max: {
      type: Number,
      default: 100000
    },
    min: {
      type: Number,
      default: -100000
    },
    maxlength: {
      type: Number,
      default: 100000
    },
    isForbidSet:{  //是否禁止输入
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      com_id: '',
      isAdd:true,
      show_dept_selector: false,
      height: 0,
      body_height: 0,
      numVal:0,
    }
  },
  computed:{
    onReadonly(){
      if((this.min&&this.min == this.max)||this.isForbidSet){
        return true
      }else{
       return false
      }
    }
  },
  watch: {
    input_value: {
      handler(val, oldVal) {
        this.setCurrentValue(val);
      },
      immediate: true,
      deep: true
    },
    show_dept_selector (val) {
      if (val) {
        this.$nextTick(() => {
          this.height = document.getElementById(this.com_id).offsetHeight
          document.querySelectorAll('body > div').item(0).style.height = 'calc(' + this.body_height + ' - ' + this.height + 'px)'
          document.querySelectorAll('body > div').item(0).style.width = 'calc(100% - 0.01rem)'
          document.querySelectorAll('body > div').item(0).style.marginRight = '-0.01rem'
          setTimeout(() => {
            document.querySelectorAll('body > div').item(0).style.width = '100%'
            document.querySelectorAll('body > div').item(0).style.marginRight = '0'
          }, 100)
        })
      } else {
        document.querySelectorAll('body > div').item(0).style.height = this.body_height
        document.querySelectorAll('body > div').item(0).style.width = 'calc(100% - 0.01rem)'
        document.querySelectorAll('body > div').item(0).style.marginRight = '-0.01rem'
        setTimeout(() => {
          document.querySelectorAll('body > div').item(0).style.width = '100%'
          document.querySelectorAll('body > div').item(0).style.marginRight = '0'
        }, 100)
      }
    }
  },
  methods: {
    setCurrentValue(value) {
      // console.log('value:'+value,this.numVal)
      if(value===''){
        return false
      }
      if(this.chosePoint){  //可以正负分
        if(value < 0){ //负分
          this.isAdd=false;
        }else{
          this.isAdd=true;
        }
      }
      let num= Math.abs(value)
      if (num === this.numVal) return;
      this.numVal = num;
    },
    activeIsAdd(){
      let isAdd=!this.isAdd;
      let value = this.numVal
      if(value===0){
        this.isAdd=isAdd;
        return false
      }

      if (!isAdd) {
        value = value * 1 * -1
      }
      if (this.max < value * 1) {
        this.numVal=this.max*1
        this.$emit('value', this.max*1)
        this.$toast('超出范围')
        return false
      }
      if (this.min > value * 1) {
        this.numVal=this.min*1
        this.$emit('value', this.min*1)
        this.$toast('超出范围')
        return false
      }
      this.$emit('value', value)
      this.isAdd=isAdd;
    },
    onInput (val) {
        if(!val){
          this.$emit('value','');
          return false
        }
        let value = val
        if (value.length > this.maxlength) {
          return false
        }
        if (!this.isAdd) {
          value = value * 1 * -1
        }
        // console.log(value,this.numVal,this.max,this.min)
        // if (this.min != this.max&&this.max < value * 1) {
        //   console.log("大")
        //   this.numVal=this.max*1
        //   this.$toast('超出范围')
        //   return false
        // }
        this.$emit('value', value * 1)
    },
    onBlur() {
      let value=this.numVal;
      if (!this.isAdd) {
        value = value * 1 * -1
      }
      if (this.numVal==='') {
        this.$toast('积分不能为空')
        this.$emit('value', this.min * 1)
        return false
      }
      if (this.max && this.max < value * 1) {
        this.$emit('value', this.max * 1)
        this.$toast('超出范围')
        return false
      }
      if (this.min > value * 1) {
        this.$emit('value', this.min * 1)
        this.$toast('超出范围')
        return false
      }
    },
  },

}
</script>

<style scoped lang="less">
.picker-box{
  width: 55px;
  border-radius: 25px;
  background-color: #f1f1f1;
  position: relative;
  height: 30px;
}
.picker-box span{
 text-align: center;
 line-height: 30px;
 font-size: 12px;
}
.yuan{
  width: 25px;
  height: 25px;
  background: #26A2FF;
  border-radius: 50px;
  position: absolute;
  top: 3px;
}
.picker-left{
  left: 3px;
}
.picker-right{
  right: 3px;
}
/deep/ .van-cell__title {
  width: 2rem;
  -webkit-box-flex: 0;
  -webkit-flex: none;
  flex: none;
}
/deep/ .van-cell__value {
  text-align: left;
  font-size: 0.36rem;
}
.diy-bar {
  padding: 0.32rem;
}
.v-focus {
  font-size: 0.34rem;
  vertical-align: top;
  color: #238dfa;
  animation: 1s cursor-flicker infinite;
}

@keyframes cursor-flicker {
  from {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/deep/ .van-number-keyboard__title {
  height: 0.88rem;
  border-top: 1px solid #94959a;
  background-color: #f0f1f3;
  text-align: right;
}
/deep/ .van-number-keyboard__title span {
  height: 0.88rem;
  line-height: 0.88rem;
}
/deep/ .van-number-keyboard__title-left {
  left: unset;
  right: 0;
}
/deep/ .van-number-keyboard__title-left a {
  padding: 0 0.32rem;
  color: #238dfa;
}
</style>