精华内容
下载资源
问答
  • antd+react inputnumber 小数精度

    万次阅读 2021-01-25 13:31:24
    1、首先需要inputnumber对精度进行控制,这里精度控制在1-5 <Form.Item labelCol={{ span: 8 }} wrapperCol={{ span: 8 }} label={"流速小数位数"}> {form.getFieldDecorator('flowrateDecimallen', { ...

    antd+精度状态控制,会出现第一次点击聚焦仍然显示上一次值的情况。

    1、首先需要inputnumber对精度进行控制,这里精度控制在1-5

     <Form.Item labelCol={{ span: 8 }} wrapperCol={{ span: 8 }} label={"流速小数位数"}>
                        {form.getFieldDecorator('flowrateDecimallen', {
                          initialValue: objectData?.flowrateDecimallen,
                          rules: [
                            { validator: (rule: any, value: any, callback: any) => validateHeightAndMin(value, callback, '') }
                          ]
                        })(<InputNumber min={0} max={5} precision={0} placeholder={"请输入"} onChange={currentPrecisionChange}></InputNumber>)}
                      </Form.Item>
    

    2、受精度控制的inputnumber

    初始化数据:

      const initDymAttr = () => {
        dymAttr.flowrateInit = undefined
        dymAttr.flowInit = undefined
        dymAttr.cumulativeFlowMax = undefined
        dymAttr.cumulativeFlowMin = undefined
        dymAttr.currentSpeedMax = undefined
        dymAttr.currentSpeedMin = undefined
      }
    

    状态:

     const [currentPrecision, setCurrentPrecision] = useState<number | undefined>(5);
    
     <Form.Item labelCol={{ span: 8 }} wrapperCol={{ span: 8 }} label={"流速初值"}>
                        {form.getFieldDecorator('flowrateInit', {
                          initialValue: objectData?.flowrateInit,
                          rules: [
                            { validator: (rule: any, value: any, callback: any) => validateHeightAndMin(value, callback, '') }
                          ]
                        })(<InputNumber onChange={(value: any) => keyChange(value, "flowrateInit", "current")}
                          onFocus={currentNumberFocus} precision={currentPrecision} placeholder={"请输入"}></InputNumber>)}
                      </Form.Item>
    

    3、精度值变化响应函数:

      const currentPrecisionChange = (value: number | undefined) => {
        if (value != undefined && (value > 5 || value < 0)) {
          message.error("小数位为0-5位")
        }
        else {
          setCurrentPrecision(value)
        }
      }
    

    4、受控组件值变化响应函数:

      const keyChange = (value: any, attrName: string, attrType: string) => {
        if (dymAttr[attrName] != value) {
          dymAttr[attrName] = value
          if (dymAttr[attrName] != null && parseFloat(dymAttr[attrName]).toFixed(currentPrecision) != "NaN" && attrType == "current") {
            form.setFieldsValue({ [attrName]: parseFloat(dymAttr[attrName]).toFixed(currentPrecision) })
            const textDom: any = document.getElementById(attrName);
            textDom.focus()
          }
          else if (dymAttr[attrName] != null && parseFloat(dymAttr[attrName]).toFixed(flowPrecision) != "NaN" && attrType == "flow") {
            form.setFieldsValue({ [attrName]: parseFloat(dymAttr[attrName]).toFixed(flowPrecision) })
            const textDom: any = document.getElementById(attrName);
            textDom.focus()
          }
        }
      }
    

    5、受控组件聚焦响应函数:

      const currentNumberFocus = (e: any) => {
        var fieldName = e.target?.id
        if (dymAttr[fieldName] != null && parseFloat(dymAttr[fieldName]).toFixed(currentPrecision) != "NaN") {
          form.setFieldsValue({ [fieldName]: parseFloat(dymAttr[fieldName]).toFixed(currentPrecision) })
        }
      }
    
    展开全文
  • 如何调整antdesign中InputNumber的宽度? 我在使用的时候,想要调整和一般性的input输入框一样的大小,但是好像不怎么起作用,请问有没有改变的方法
  • antd a-input-number 的基本使用

    千次阅读 2020-03-16 17:51:52
    antd a-input-number 的基本使用 问题说明 在项目中,经常会遇到,一个输入框只能输入数据类型数据,只能输入数据类型的正整数, 或者只能输入保留两位小数的正整数,该文只为解决此问题 解决方法 使用antd的a...

    antd a-input-number 的基本使用

    问题说明

      在项目中,经常会遇到,一个输入框只能输入数据类型数据,只能输入数据类型的正整数,
    或者只能输入保留两位小数的正整数,该文只为解决此问题
    

    解决方法

    使用antd的a-input-number组件
    该组件本身已经实现只能输入数值类型,此时不需要去写正则,只需使用precision参数
    这里详细解释precision参数
    

    precision 参数

    precision(精度)使用来限制数值的详细如下
    
    • 以下代码的输入框只能输入不带小数的正整数(如果你输入了小数点,他会四舍五入到整数)
              <a-input-number
                :precision="0.1"
                style="width: 100%"
                :min="0"
                :disabled="showable"
                placeholder="请输入"
                v-decorator="['number', {rules: [{required: true, message: '请输入人数(正整数)'}]}]" />
    
    • 以下代码的输入框只能输入带两位小数的正整数(如果你输入超过了两位小数点,他会四舍五入到保留两位,如果你没有输入到两位小数,会自动补零)
              <a-input-number
                :precision="2"
                style="width: 100%"
                :min="0"
                :disabled="showable"
                placeholder="请输入"
                v-decorator="['workHour', {rules: [{required: true, message: '请输入工时(最多输入两位小数)'}]}]" />
    
    展开全文
  • antd InputNumber 不允许输入小数

    千次阅读 2020-05-14 16:26:07
    InputNumber min={1} max={999} formatter={limitNumber} parser={limitNumber} /> /* 限制数字输入框只能输入整数 */ const limitNumber = value => { if (typeof value === 'string') { return !...
    <InputNumber min={1} max={999} formatter={limitNumber} parser={limitNumber} />
    
    
    
      /* 限制数字输入框只能输入整数 */
      const limitNumber = value => {
        if (typeof value === 'string') {
          return !isNaN(Number(value)) ? value.replace(/^(0+)|[^\d]/g, '') : ''
        } else if (typeof value === 'number') {
          return !isNaN(value) ? String(value).replace(/^(0+)|[^\d]/g, '') : ''
        } else {
          return ''
        }
      }
    
    展开全文
  • inputNumber设置必填项

    2020-09-03 17:27:12
    设置input必填项时,写法如下: <a-form-model :model="form" :rules="rules">...a-input v-model="form.desc" /> </a-form-model-item> </a-form-model> export default { data() { ret

    设置input必填项时,写法如下:

    <a-form-model :model="form" :rules="rules">
    	<a-form-model-item label="Instant delivery" prop="desc">
    		<a-input v-model="form.desc" />
    	</a-form-model-item>
    </a-form-model>
    export default {
    	data() {
    	 	 return {
    	 	    rules: {
    	 	    	desc: [{ required: true, message: '请输入', trigger: 'blur' }]
    	 	    }
    	 	  }
    	  }
     }
    

    通过 rules 属性传入约定的验证规则,并将 v-model中的变量值 设置为 prop 属性需校验的字段名即可

    当v-model中的变量过长时,写法如下:

    <a-form-model :model="form" :rules="rules">
    	<a-form-model-item label="计划进箱" :prop="'entrancePlanList.' + planIndex + '.planContainerCount'" :rules="[{ required: true, message: '请输入计划进场箱数', trigger: 'blur' }]">
    		<a-input-number v-model.trim="form.entrancePlanList[planIndex].planContainerCount" :min="1" :precision="0" style="width:100%;"/>
    	</a-form-model-item>
    </a-form-model>
    

    注意:rules为验证规则,prop设置必填属性

    1. prop写的内容要与v-model中的变量值一致:
      :prop="'entrancePlanList.' + planIndex + '.planContainerCount'"
    2. v-model的值:v-model.trim="form.entrancePlanList[planIndex].planContainerCount"
    展开全文
  • InputNumber 数字输入框限制输入不为空,最大值最小值 Ant-Design-Vue 数字输入框组件InputNumber 限制用户只能输入数字,且不能为空,限制输入最大值最小值 关键字:parser,指定从 formatter 里转换回数字的方式,...
  • a-input-number 设置输入为正整数

    千次阅读 2020-04-16 16:35:53
    <a-input-number :min="0" :precision="0" placeholder="请输入正整数"/>
  • Vue项目 使用iView 通过render函数 实现 InputNumber 的双向数据绑定 问题:在以下表格中使用InputNumber需要进行双向数据绑定,但是动态生成的InputNumber输入框组件无法绑定v-model,可以通过render函数进行双向...
  • antd InputNumber组件限制小数位数或者整数 使用精度来控制的 precision. precision={0} // 只能输入整数 precision={1} // 保留一位小数 … // 只能输入整数 <InputNumber min={1} max={999} precision={0} />...
  • input number 输入正整数 HTML页面中,input输入框当仅能输入数字,发现还会键入- + e E等各种字符。有时为了不让这些字符输入,切只能输入整数。 解决方案如下: <input id="mid" type="number" min="1" oninput=...
  • input number解决ios兼容问题

    千次阅读 2020-02-27 08:56:35
    https://segmentfault.com/a/1190000018273030 我们在做表单输入时,有时候对于有些输入比较有限制,比如输入天数必须为正整数,再比如有些特殊需求需要输入保留小数点的后面n位。那么我们如何在输...
  • InputNumber组件强制限制小数,可以使用 formatter 属性配合正则来实现,但在实践中发现一个问题,比如限制的两位小数,当我输第三位小数的时候,组件会保存这个值,导致传给后台的值多出一位小数。 在2.9.0之后,...
  • 官网地址 InputNumber <InputNumber placeholder="原价" min={0.1} step={0.1} value={price} onChange={value=>{ setPrice( Number(value).toFixed(1)) }} /> 注意:在提交接口前还需要判断下,是为了...
  • 清除或隐藏antd数字输入框InputNumber最右侧上下箭头 在antd里面有一个数字输入框 InputNumber ,在这个数字输入框中有一个上下箭头 这个上下箭头可以调整输入框里的数字,默认是按照整数1增加或者递减。这个上下...
  • 第一种:只有一个符号格式,比如¥, $, %, &, 等等。参考antdesign 官网 参考链接:... 第二中:有多个符号格式,比如KG, CM等等 ...1、InputNumber的宽度width适当调...
  • a-input-number @change="onChange" :default-value="1000" placeholder="请输入总金额" :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')" :parser="value => `${value}`....
  • type为numberinput标签输入小数的方法

    万次阅读 多人点赞 2016-09-17 03:25:13
    type为numberinput标签输入小数的方法
  • Antd源码浅析(二)InputNumber组件 一

    千次阅读 2018-05-25 13:16:56
    上篇我们讲了Icon组件,Icon组件是Antd源码库中实现比较简单的组件,适合大家入门,这篇文章主要和大家一起分析一下数字输入框组件,即InputNumber,难度适中,但蕴含的Antd里较为经典的开发场景,适合大家比较深入...
  • a-input-number v-decorator="[item.attributeCode]" :min="0" :formatter='limitNumber' :parser='limitNumber' /> /* 限制数字输入框只能输入整数 */ const limitNumber = value => { if (typeof ...
  • InputNumber v-model="num" @on-change="numChange"></InputNumber> data () { return { num: 0, num1: 100 } } 错误的写法 此时你会发现输入框内的值在大于100时并没有变成100 methods: { ...
  • 处理如下: <FormItem required label="采购时长" > <FormItem name="purchaseDuration" noStyle rules={[{required: true}]} > <InputNumber
  • 默认在输入框最右有一个上下箭头,可以调节数字大小,如下图, 但是我不需要,在css中加上以下代码,让上下箭头消失 input::-webkit-outer-spin-button, ...number&quot;] { -moz-appearance: ...
  • 如果不想要修正为最大最小值, 组件中不设置最大最小值即可
  • InputNumber 计数器的change事件定义时如果不传入参数value,会产生this.num不同步的问题 <template> <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字">...
  • A component is changing an uncontrolled input of type number to be controlle input 的值如果不存在,请设置成 ‘’ , &lt;input type="number" placeholder="请输入申请金额" value={...
  • el-input-number v-model="num" :min="1" :max="10" label="描述文字"></el-input-number> 当num设置为 null 或者 "" 都不能将输入框的值变为空 后来发现 将num 设置为undefined
  • 数字输入框,如下图,就是一个有着加减按钮的input而已,多用于购物车商品数目添加减少,这个输入框组件初看上去应该不是很难,但是Element的具体实现却有很多值得学习的地方,看完源码才感觉真难!官网代码点此 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 742,625
精华内容 297,050
关键字:

ainputnumber