uni-app uni-easyinput组件type为number时初始参数为空报错阻塞

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app uni-easyinput组件type为number时初始参数为空报错阻塞

开发环境 版本号 项目创建方式
Windows 11 HBuilderX

示例代码：

props:{  
// ...  
value: [Number, String, undefined, null],  
modelValue: [Number, String, undefined, null],  
// ...  
},  
methods: {  
  init() {  
       if (this.value || this.value === 0) {  
            this.val = this.value;  
       } else if (this.modelValue || this.modelValue === 0) {  
            this.val = this.modelValue;  
       }   
       // 此处判断建议新增  
         else if (this.type === 'number') {  
            this.val = undefined  
      } else {  
            this.val = null;  
      }  
   },  
// ...  
}

操作步骤：

<uni-easyinput type="number" :maxlength="24" v-model="valiFormData.rfid" :inputBorder="false" placeholder="请输入标签编码" />  
const valiFormData = ref({  
        c1: uni.getStorageSync('currentMenu').c1, //场景ID 后期后台接口获取  
        state: 'in_warehouse',  
        isLowValue: false, //是否低值易耗  
        externalId: '',  
        rfid: '',  
})

预期结果：

  • 输入框显示正常

实际结果：

  • 输入框不显示，同时console控制栏报错

bug描述：

在from中使用uni-easyinput组件，type类型选择为number的时候，如果v-model绑定的参数例如: v-mode="formData.num"，页面初始参数formData定义为const formData = ref({ num: '' })，uni-easyinput组件会报错误TypeError: Cannot read properties of null (reading 'toLocaleString')阻塞页面显示。经过测试，在组件props接受的value，modelValue中增加undefined, null类型，同时在init方法中增加type==='number’的判断即可解决


Harmonyos Next教程
2 回复

你尝试更新一下uni-easyinput，之前修过这个问题


在uni-app中，使用uni-easyinput组件并设置type为number时，如果初始参数为空（即未设置初始值或绑定值为undefined或null），可能会遇到报错并导致页面阻塞。为了避免这种情况，可以通过以下几种方式处理：

1. 设置初始值

确保在使用uni-easyinput时，绑定的值有一个初始的数值类型，比如0或空字符串（对于数字类型输入，空字符串通常会被转换为0）。

<template>
  <view>
    <uni-easyinput
      v-model="inputValue"
      type="number"
      placeholder="请输入数字"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '' // 初始化为空字符串，uni-app会自动处理为0
    };
  }
}
</script>

2. 使用watch监听并处理空值

如果无法确保初始值总是有效，可以在watch中监听输入值的变化，并在值为空时赋予一个默认值。

<template>
  <view>
    <uni-easyinput
      v-model="inputValue"
      type="number"
      placeholder="请输入数字"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: null // 初始化为null
    };
  },
  watch: {
    inputValue(newVal) {
      if (newVal === null || newVal === undefined || newVal === '') {
        this.inputValue = 0; // 当输入为空时，设置为0
      }
    }
  }
}
</script>

3. 在方法中进行预处理

如果输入值是通过某些方法或计算属性赋值的，可以在赋值前进行预处理。

<template>
  <view>
    <uni-easyinput
      v-model="processedInputValue"
      type="number"
      placeholder="请输入数字"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      rawInputValue: null, // 原始输入值
      processedInputValue: 0 // 处理后的输入值
    };
  },
  watch: {
    rawInputValue(newVal) {
      this.processedInputValue = newVal !== null && newVal !== undefined && newVal !== '' ? newVal : 0;
    }
  }
}
</script>

通过上述方法，可以有效避免在使用uni-easyinput组件且type为number时，因初始参数为空而导致的报错和阻塞问题。每种方法都有其适用场景，开发者可以根据实际需求选择最合适的处理方式。

回到顶部