element-ui 计数器设置最小值后,希望值显示为空

目录

一、问题

二、实现设置最小值后，默认显示为空

三、希望在change事件中实现：设置最小值后,默认显示为空

四、总结

---

一、问题

1.el-input-number设置了最小值后,默认会显示最小值,如 :min="1"，则会默认显示1.

二、实现设置最小值后，默认显示为空

1.实现方法：设置值为undefined

<template>
  <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
</template>
export default{
  data(){
     return{
        num:undefined;
     }
  }
}

2.效果如下图所示：

三、希望在change事件中实现：设置最小值后,默认显示为空

1.实现方法：设置值为undefined,并且将设置放入 setTimeout中（添加延时）

2.el-input-number基本效果：

   min:最小值；max:最大值

   a.当输入的值在(-∞，min)之间，光标失去焦点后显示的值直接变为   min(最小值）；

   b.当输入的值在[min,max]之间时,光标失去焦点后显示的值为   输入的值；

   c.当输入的值在(max,+∞）之间时,光标失去焦点后显示的值直接变为  max(最大值);

3.正确写法：代码如下：

  1） 预期效果：(-∞，min) 显示为min，[min,3]显示  为输入的值，(3,+∞)置为空

        当输入 大于 给定值时，计数器输入框中 显示为空

<template>
  <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
</template>
export default{
  data(){
     return{
        num:undefined;
     }
  },
  methods:{
    handleChange(inputContent) {
      // 当数值>10时，清空计数器
      setTimeout(() => {
        console.log("inputContent", inputContent);
        if (inputContent > 3) {
          this.num = undefined;
        }
      });
    },
  }
}

    2）实际效果：与预期效果一致

a.输入-2

b.输入2

 c.输入3

d.输入9 

e.输入 10

 f.输入11

 4.错误写法1：不添加延时，直接设置值为undefined，代码如下：

  1） 预期效果：(-∞，min) 显示为min，[min,3]显示  为输入的值，(3,+∞)置为空

        当输入 大于 给定值时，计数器输入框中 显示为空

<template>
  <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
</template>
export default{
  data(){
     return{
        num:undefined;
     }
  },
  methods:{
    handleChange(inputContent) {
      // 当数值>10时，清空计数器
      console.log("inputContent", inputContent);
      if (inputContent > 3) {
        this.num = undefined;
      }
    },
  }
}

   2）实际效果：与预期效果不一致

        a.当第一次输入的值在(3,+∞）之间，直接显示为   输入的值

           先输入4（图1-1,1-2），再输入5（图2-1,2-2），再输入2（图3-1,3-2），再输入4（图4-1,4-2），再输入5（图5-1,5-2）

       ①错误，没有清空，如图1-2所示，传入的值设置为了undefined,但el-input-number内部值没有改变

图1-1

图1-2

     ②错误，没有清空，如图2-2所示，传入的值设置为了undefined,但el-input-number内部值没有改变

图2-1

图2-2

    ③正确

图3-1

图3-2

    ④正确，清空了

图4-1

图4-2

     ⑤错误，没有清空，如图5-2所示，传入的值设置为了undefined,但el-input-number内部值没有改变

图5-1

图5-2

   b.综上所述，当输入过一次 小于3的值后，下一次输入大于3的值会被正常清空。其他清空大于3时不能被正常清空。对于这种效果一般都不是我们希望。

  c.原因：外部传入的值和计数器组件内部的值没有保持一致-----异步问题，所以可以通过延时解决

5.错误写法2：正确写法和错误写法1一起写了，代码如下：

<template>
  <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
</template>
export default{
  data(){
     return{
        num:undefined;
     }
  },
  methods:{
    handleChange(inputContent) {
      // 当数值>10时，清空计数器
      console.log("inputContent", inputContent);
      if (inputContent > 3) {
        this.num = undefined;
        console.log("没有延时！！！")
      }
      setTimeout(() => {
        console.log("inputContent", inputContent);
        if (inputContent > 3) {
          this.num = undefined;
          console.log("setTimeout,有延时！！！")
        }
      });
    },
  }
}

1）实际效果：与错误写法1中截图一模一样，此处不再赘述，感兴趣的可以复制代码，自己测试。

图6-1

 

图6-2

 2）我不理解的事情：

       a.如图6-1所示，明明就是先执行了没有延时的代码，后来又执行了有延时的代码，效果不应该和正确代码一致吗？怎么就还是错误的。

       b.还有啊，我想可能是延时太短，手动设置了延时为5s,还是错误的。

       c.困惑：所以真的是因为异步才不正确吗？

四、总结

1.当设置了计数器的最大值max和最小值min后，计数器想要置为空的方法：

    1）想要在开始的时候，设置计数器的值为空，将值置为  undefined即可

    2）想要在change事件中，设置计数器的值为空，在setTimeout中将值置为 undefined即可

2.未解决的问题，如：错误写法2-----我不理解的事情所述。

   1）setTimeout延时解决了在change事件中设置计数器中的值为空不生效的问题——说明是异步问题导致了外部传入的值和组件内部的值不一致

  2）但是不加延时和加了延时的代码一起写时，本来应该采用有延时的结果，即为正确的写法。但事实告诉我这样写是错误的——说明和异步没有关系

  3）1）和 2）明显是互相矛盾的。如有大神知道其中的逻辑关系，请在评论区评论一下，不甚感激！

/*

希望对你有帮助！

如有错误，欢迎指正，谢谢！

*/