Vue3数字输入框(InputNumber)

简介: 这是一个可定制的数字输入框组件,支持设置宽度、最小值、最大值、步长、精度等属性,并可添加前缀图标及自定义显示格式。组件兼容键盘快捷键操作,具备禁用功能。示例代码展示了如何使用该组件实现不同场景下的数值输入与格式化展示。组件还利用 `add` 函数解决了 JS 精度问题,并通过 `useSlotsExist` 监听插槽。

可自定义设置以下属性:

  • 数字输入框宽度(width),类型:string | number,单位 px,默认 90

  • 最小值(min),类型:number,默认 -Infinity

  • 最大值(max),类型:number,默认 Infinity

  • 每次改变步数,可以为小数(step),类型:number,默认 1

  • 数值精度(precision),类型:number,默认 0

  • 前缀图标(prefix),类型:string | slot,默认 undefined

  • 指定展示值的格式(formatter),类型:Function,默认 (value: string) => value

  • 是否启用键盘快捷键行为(上方向键增,下方向键减)(keyboard),类型:boolean,默认 true

  • 是否禁用(disabled),类型:boolean,默认 false

  • 当前值(v-model:value),类型:number | null,默认 null

效果如下图:在线预览

其中引入使用了以下工具函数:

①创建数组输入框组件InputNumber.vue:

<script setup lang="ts">
defineOptions({
  inheritAttrs: false
})
import { ref, computed, watch } from 'vue'
import { useSlotsExist, add } from '../utils'
interface Props {
  width?: string | number // 数字输入框宽度,单位 px
  min?: number // 最小值
  max?: number // 最大值
  step?: number // 每次改变步数,可以为小数
  precision?: number // 数值精度
  prefix?: string // 前缀图标 string | slot
  formatter?: Function // 指定展示值的格式
  keyboard?: boolean // 是否启用键盘快捷键行为(上方向键增,下方向键减)
  disabled?: boolean // 是否禁用
  value?: number | null // (v-model) 当前值
}
const props = withDefaults(defineProps<Props>(), {
  width: 90,
  min: -Infinity,
  max: Infinity,
  step: 1,
  precision: 0,
  prefix: undefined,
  formatter: (value: string) => value,
  keyboard: true,
  disabled: false,
  value: null
})
const inputWidth = computed(() => {
  if (typeof props.width === 'number') {
    return props.width + 'px'
  }
  return props.width
})
const precision = computed(() => {
  // 数值精度取步长和精度中较大者
  const stepPrecision = String(props.step).split('.')[1]?.length || 0
  return Math.max(props.precision, stepPrecision)
})
const slotsExist = useSlotsExist(['prefix'])
const showPrefix = computed(() => {
  return slotsExist.prefix || props.prefix
})
const numValue = ref(props.formatter(props.value?.toFixed(precision.value)))
watch(
  () => props.value,
  (to) => {
    numValue.value = to === null ? null : props.formatter(to?.toFixed(precision.value))
  }
)
watch(numValue, (to) => {
  if (!to) {
    emitValue(null)
  }
})
const emits = defineEmits(['update:value', 'change'])
function emitValue(value: number | null) {
  emits('change', value)
  emits('update:value', value)
}
function onChange(e: Event) {
  const value = (e.target as HTMLInputElement).value.replace(/,/g, '')
  if (!Number.isNaN(parseFloat(value))) {
    // Number.isNaN() 判断传递的值是否为NaN,并检测器类型是否为 Number
    if (parseFloat(value) > props.max) {
      emitValue(props.max)
      return
    }
    if (parseFloat(value) < props.min) {
      emitValue(props.min)
      return
    }
    if (parseFloat(value) !== props.value) {
      emitValue(parseFloat(value))
    } else {
      numValue.value = props.value?.toFixed(precision.value)
    }
  } else {
    numValue.value = props.value?.toFixed(precision.value)
  }
}
function onKeyboard(e: KeyboardEvent) {
  if (e.key === 'ArrowUp') {
    onUp()
  }
  if (e.key === 'ArrowDown') {
    onDown()
  }
}
function onUp() {
  const res = parseFloat(Math.min(props.max, add(props.value || 0, +props.step)).toFixed(precision.value))
  emitValue(res)
}
function onDown() {
  const res = parseFloat(Math.max(props.min, add(props.value || 0, -props.step)).toFixed(precision.value))
  emitValue(res)
}
</script>
<template>
  <div
    tabindex="1"
    class="m-input-number"
    :class="{ 'input-number-disabled': disabled }"
    :style="`width: ${inputWidth};`"
  >
    <div class="m-input-number-wrap">
      <span v-if="showPrefix" class="input-prefix">
        <slot name="prefix">{
  
  { prefix }}</slot>
      </span>
      <input
        v-if="keyboard"
        class="input-number"
        autocomplete="off"
        :disabled="disabled"
        v-model="numValue"
        @keydown.up.prevent
        @keydown="onKeyboard"
        @change="onChange"
        v-bind="$attrs"
      />
      <input v-else autocomplete="off" class="input-number" @change="onChange" v-model="numValue" v-bind="$attrs" />
    </div>
    <div class="m-handler-wrap">
      <span class="m-arrow up-arrow" :class="{ 'arrow-disabled': (value || 0) >= max }" @click="onUp">
        <svg focusable="false" class="icon-svg" data-icon="up" aria-hidden="true" viewBox="64 64 896 896">
          <path
            d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
          ></path>
        </svg>
      </span>
      <span class="m-arrow down-arrow" :class="{ 'arrow-disabled': (value || 0) <= min }" @click="onDown">
        <svg focusable="false" class="icon-svg" data-icon="down" aria-hidden="true" viewBox="64 64 896 896">
          <path
            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
          ></path>
        </svg>
      </span>
    </div>
  </div>
</template>
<style lang="less" scoped>
.m-input-number {
  position: relative;
  display: inline-block;
  height: 32px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.88);
  line-height: 1.5714285714285714;
  padding: 0 11px;
  background-color: #ffffff;
  border-radius: 6px;
  border: 1px solid #d9d9d9;
  transition: all 0.2s;
  &:hover {
    border-color: #4096ff;
    .m-handler-wrap {
      background: #fff;
      opacity: 1;
    }
  }
  &:focus-within {
    // 激活时样式
    border-color: #4096ff;
    box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
  }
  .m-input-number-wrap {
    height: 100%;
    display: flex;
    .input-prefix {
      pointer-events: none;
      margin-inline-end: 4px;
      display: inline-flex;
      align-items: center;
    }
    .input-number {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.88);
      width: 100%;
      height: 100%;
      background: transparent;
      border-radius: 6px;
      transition: all 0.2s linear;
      appearance: textfield;
      border: none;
      outline: none;
    }
    input::-webkit-input-placeholder {
      color: rgba(0, 0, 0, 0.25);
    }
    input:-moz-placeholder {
      color: rgba(0, 0, 0, 0.25);
    }
    input::-moz-placeholder {
      color: rgba(0, 0, 0, 0.25);
    }
    input:-ms-input-placeholder {
      color: rgba(0, 0, 0, 0.25);
    }
  }
  .m-handler-wrap {
    position: absolute;
    top: 0;
    right: 0;
    width: 22px;
    height: 100%;
    background: transparent;
    border-radius: 0 6px 6px 0;
    opacity: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch; // 默认值,元素被拉伸以适应容器
    transition: all 0.2s linear 0.2s;
    .icon-svg {
      width: 7px;
      height: 7px;
      fill: rgba(0, 0, 0, 0.45);
      user-select: none;
    }
    .m-arrow {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: auto;
      height: 40%;
      border-left: 1px solid #d9d9d9;
      cursor: pointer;
      transition: all 0.2s linear;
      &:hover {
        height: 60%;
        .icon-svg {
          fill: @themeColor;
        }
      }
    }
    .up-arrow {
      border-top-right-radius: 6px;
    }
    .down-arrow {
      border-top: 1px solid #d9d9d9;
      border-bottom-right-radius: 6px;
    }
    .arrow-disabled {
      cursor: not-allowed;
    }
  }
}
.input-number-disabled {
  color: rgba(0, 0, 0, 0.25);
  background-color: rgba(0, 0, 0, 0.04);
  border-color: #d9d9d9;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
  &:hover {
    border-color: #d9d9d9;
  }
  &:focus-within {
    // 激活时样式
    border-color: #d9d9d9;
    box-shadow: none;
  }
  .m-input-number-wrap .input-number {
    cursor: not-allowed;
  }
  .m-handler-wrap {
    display: none;
  }
}
</style>

②在要使用的页面引入:

其中 moneyFormat() 数值格式化方法请参考:日期格式化 | Vue Amazing UI

<script setup lang="ts">
import InputNumber from './InputNumber.vue'
import { ref, watchEffect } from 'vue'
import { formatNumber } from 'vue-amazing-ui'
const value = ref(3)
const formatValue = ref(1000)
watchEffect(() => {
  console.log('value:', value.value)
})
watchEffect(() => {
  console.log('formatValue:', formatValue.value)
})
function formatter(num: string): string {
  return formatNumber(num, 2)
}
function onChange(number: number | null) {
  console.log('change:', number)
}
</script>
<template>
  <div>
    <h1>{
  
  { $route.name }} {
  
  { $route.meta.title }}</h1>
    <h2 class="mt30 mb10">基本使用</h2>
    <InputNumber v-model:value="value" placeholder="请输入" @change="onChange" />
    <h2 class="mt30 mb10">步数为小数</h2>
    <InputNumber :step="0.1" v-model:value="value" />
    <h2 class="mt30 mb10">设置数值精度</h2>
    <InputNumber :min="-10" :max="10" :step="0.6" :precision="2" v-model:value="value" />
    <h2 class="mt30 mb10">格式化展示</h2>
    <InputNumber :width="120" :step="10" :formatter="formatter" v-model:value="formatValue" />
    <h2 class="mt30 mb10">自定义最大最小值</h2>
    <InputNumber :min="0" :max="10" v-model:value="value" />
    <h2 class="mt30 mb10">添加前缀图标 $</h2>
    <InputNumber prefix="$" v-model:value="value" />
    <h2 class="mt30 mb10">禁用</h2>
    <InputNumber v-model:value="value" disabled />
  </div>
</template>
相关文章
|
9天前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
|
6天前
|
JavaScript 前端开发 开发者
Vue 3中的Proxy
【10月更文挑战第23天】Vue 3中的`Proxy`为响应式系统带来了更强大、更灵活的功能,解决了Vue 2中响应式系统的一些局限性,同时在性能方面也有一定的提升,为开发者提供了更好的开发体验和性能保障。
19 7
|
7天前
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
25 3
|
6天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何?
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升,从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等,使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
24 1
|
6天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定,无论是使用内置的指令如 `v-model`,还是通过自定义事件或自定义指令,都能够方便地实现数据与视图之间的双向交互,满足不同场景下的开发需求。
25 1
|
8天前
|
前端开发 JavaScript
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
|
9天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
12天前
|
JavaScript API
vue3知识点:ref函数
vue3知识点:ref函数
25 2
|
12天前
|
API
vue3知识点:reactive函数
vue3知识点:reactive函数
22 1
|
12天前
|
JavaScript 前端开发 API
vue3知识点:Vue3.0中的响应式原理和 vue2.x的响应式
vue3知识点:Vue3.0中的响应式原理和 vue2.x的响应式
21 0