基于el-input封装:只能输入0~100正整数,输入负数自动置为0,输入大于100自动置为100

这是一个Vue组件`NumberFormatInput`的实现,用于限制输入为数字并格式化。组件接收`placeholder`、`value`和`styles`作为属性,并在输入时进行实时验证,确保输入值只包含数字和一个点。当失去焦点时,会进一步检查并限制值在0到100之间。组件还监听`input`和`blur`事件,触发自定义的`on-change`事件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<template>
  <el-input
    :value="value"
    :placeholder="placeholder"
    :style="styles"
    @input="handleInput"
    @blur="handleBlur"
  >
    <template slot="prepend">
      <slot name="prepend" />
    </template>
    <template slot="append">
      <slot name="append" />
    </template>
    <template slot="prefix">
      <slot name="prefix" />
    </template>
    <template slot="suffix">
      <slot name="suffix" />
    </template>
  </el-input>
</template>
<script>
export default {
  name: 'NumberFormatInput',
  components: {},
  props: {
    placeholder: {
      type: String,
      default: '请输入'
    },
    value: {
      type: [Number, String],
      default: null
    },
    styles: {
      type: String,
      default: ''
    }
  },
  emits: ['on-change'],
  data() {
    return {
      input: ''
    }
  },
  computed: {},
  watch: {},
  created() {},
  beforeMount() {},
  mounted() {},
  methods: {
    handleInput(value) {
      value = value.replace(/[^\d.]/g, '')
      value = value.replace(/^\./g, '') // 验证第一个字符是数字而不是.
      value = value.replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
      value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.') // 保证.只出现一次,而不能出现两次以上
      this.$emit('input', value)
    },
    handleBlur(e) {
      if (!e.target.value) return
      let value = e.target.value
      value = value > 100 ? 100 : value < 0 ? 0 : value
      value = parseInt(value)
      this.$emit('input', value)
      this.$emit('on-change')
    }
  }
}
</script>
<style lang="scss" scoped></style>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值