crm-mobile/components/wk-form/wk-field-input-number.vue

<template>
  <view class="wk-field wk-field-input">
    <view v-if="_label" class="wk-field__label">
      <view v-if="field.isNull === 1" class="line" />
      {{ _label }}
    </view>
    <view class="wk-field__body" @click="handleClick">
      <!-- #ifdef MP-WEIXIN -->
      <input
        ref="core"
        v-model="formValue"
        :disabled="field.disabled"
        :placeholder="_placeholder"
        placeholder-class="wk-placeholder placeholder"
        type="digit"
        class="wk-field__body-core"
        @input="changeText">
      <!-- #endif -->
      <!-- #ifndef MP-WEIXIN -->
      <input
        ref="core"
        v-model="formValue"
        :disabled="field.disabled"
        :placeholder="_placeholder"
        placeholder-class="wk-placeholder placeholder"
        type="number"
        class="wk-field__body-core"
        @input="changeText">
      <!-- #endif -->
			
      <view
        v-if="field.formType === 'percent'"
        class="percent">
        %
      </view>
    </view>
  </view>
</template>

<script>
  import mixins from './mixins'
	
  export default {
    name: 'WkFieldInputNumber',
    mixins: [mixins],
    data() {
      return {
        timer: null
      }
    },
    methods: {
      handleClick() {
        if (this.field.disabled) {
          if (this.config && this.config.disabledMsg) {
            this.$toast(this.config.disabledMsg)
          }
          return
        }
      },
			
      formatValue(oldStr) {				
        let valueStr = this.toNumber(oldStr)
        const arr = String(valueStr).split('.')
				
        const len = String(valueStr)
          .replace('.', '')
          .replace('-', '')
          .length
        const maxlength = this.field.formType === 'percent' ? 10 : 15

        const min = this.$isEmpty(this.field.minNumRestrict) ? -Infinity : Number(this.field.minNumRestrict || -Infinity)
        const max = this.$isEmpty(this.field.maxNumRestrict) ? Infinity : Number(this.field.maxNumRestrict || Infinity)

        // precisions值 null 不支持小数  0 不限制小数位
        let num = ''
        if (len > maxlength) {
          // 最多支持***位数字（包含小数位）
          num = valueStr.slice(0, len)
          valueStr = this.formatValue(num)
        } else if (this.$isEmpty(this.field.precisions) && String(valueStr).includes('.')) {
          // 不支持小数
          num = valueStr.slice(0, String(valueStr).indexOf('.'))
          valueStr = this.formatValue(num)
        } else if (arr.length > 1 && arr[1].length > Number(this.field.precisions)) {
          // 小数位不能大于precisions
          arr[1] = arr[1].slice(0, Number(this.field.precisions))
          num = arr.join('.')
          valueStr = this.formatValue(num)
        } else if (Number(valueStr) < min) {
          // 不能小于min
          valueStr = String(Number(min))
        } else if (Number(valueStr) > max) {
          // 不能大于max
          valueStr = String(Number(max))
        }
        return valueStr
      },
			
      // 转化为数字字符串
      toNumber(val) {
        val = String(val)
        if (isNaN(Number(val))) {
          val = val.slice(0, -1)
          return this.toNumber(val)
        } else {
          return val
        }
      },
			
      changeText() {
        let oldStr = String(this.formValue)
        let valueStr = this.formatValue(this.formValue)
				
        this.formValue = oldStr
        this.$nextTick(() => {
          this.formValue = valueStr
          if (this.value !== this.formValue) {
            this.emitChangeEvt(this.formValue)
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
	@import './wkField.scss';

	.placeholder {
		font-size: $wk-font-sm;
	}
	
	.percent {
		font-size: $wk-font-sm;
	}
</style>