FinanceInput

标签：FinanceInput const String default amountValue type emit

<template>
  <a-input-number
    v-model:value="numberValue"
    :placeholder="placeholder"
    :style="{ width: width }"
    v-bind="$attrs"
    :onFocus="inputFocus"
    :onBlur="inputBlur"
    :min="min"
  >
    <template #addonAfter v-if="addonAfterString"> {{ addonAfterString }}</template>
  </a-input-number>
</template>

<script setup lang="ts">
  // v-bind="$attrs"接受不了class和style
  import { watch, type PropType, computed } from 'vue'
  const emit = defineEmits(['update:amountValue', 'inputBlur', 'inputFocus'])

  const props = defineProps({
    amountValue: {
      type: Number as PropType<number>,
      default: () => 1,
    },
    placeholder: {
      type: String,
      default: '请输入',
    },
    min: {
      type: Number,
      default: () => 0,
    },
    width: {
      type: String,
      default: () => '240px',
    },
    addonAfterString: {
      type: String,
      default: () => '元',
    },
  })
  // v-model传入了一个computed用来处理watch修改值的时候实时更新
  const numberValue = computed({
    get() {
      return props.amountValue
    },
    set(val: number) {
      emit('update:amountValue', val)
    },
  })
  //   监听修改9.0333 =>9.03
  watch(
    () => props.amountValue,
    newValue => {
      if (/[0-9]+\.[0-9]{3,}/.test(String(newValue))) {
        emit('update:amountValue', Number(String(newValue).replace(/([0-9]+\.[0-9]{2})[0-9]*/, '$1')))
        return
      }
    },
    { immediate: true }
  )
  const inputFocus = (e: any) => {
    e.currentTarget.setSelectionRange(0, String(props.amountValue).length)
    emit('inputFocus', e)
  }
  const inputBlur = (e: any) => {
    emit('inputBlur', e)
  }
</script>

标签：FinanceInput,const,String,default,amountValue,type,emit
From： https://www.cnblogs.com/gzeal/p/17140143.html