填坑😋：vant的stepper步进器有点小坑

站长

2024年07月30日 17:34 · 阅读数 25

前言

心理咨询说一个人怎样才能发生真正的改变。就是，当他再次到达那个“十字路口”，他不像以前那样直接走向左边，而是开始思考，自己是不是可以选右边。

填坑😋：vant的stepper步进器有点小坑

人间烟火味~

7月新出炉文：

一、场景

相信大家都玩过vant库。

我会用最通俗易懂的话语描述的😊，相信大家能看懂的。

我有一个表单，表单里面有一个步进器，初始化进来的时候，传入数值为null，我想要的效果是为null，但现在前端显示0，如下图所示：

填坑😋：vant的stepper步进器有点小坑

二、分析

目前的代码：

<van-stepper
    v-model="fild.value"
    :step="fild.step"
    :min=" fild.min"
    :max="fild.max"
    :decimal-length="fild.decimalLength"
  />

为什么我们现在前端展示的是0？

因为前端拿到值后，会转换一下，如果是null的话会设置为0。

如果前端不转换的话，按照文档上，默认值应该是1

填坑😋：vant的stepper步进器有点小坑

那么，我们现在的需求是：数据为null，展示null。

好。

我们看一下文档有没有相关api。

2.1 default-value

我们可以看到有个属性default-value：初始值，当 v-model 为空时生效

填坑😋：vant的stepper步进器有点小坑

我按照文档设置了之后。:default-value="null"

<van-stepper
    v-model="fild.value"
    :step="fild.step"
    :min=" fild.min"
    :max="fild.max"
    :decimal-length="fild.decimalLength"
    :default-value="null"
  />

无效。页面不起作用。

那default-value=""呢？

很遗憾，也无效🤣。

我怀疑他这个属性，只是能设置数值，无法设置null这些字符。

2.2 allow-empty

在我山重水复疑无路的时候，我又翻了一下文档。

看到了一个新属性，allow-empty：是否允许输入的值为空

这不就是我想要的属性效果吗。

填坑😋：vant的stepper步进器有点小坑

我当时看到是有个疑惑的：

default-value：初始值，当 v-model 为空时生效

allow-empty：是否允许输入的值为空

感觉这两个属性，要先设置allow-empty，default-value才生效的样子。

这个后面说。

填坑😋：vant的stepper步进器有点小坑

我正欣喜万分开始尝试，看到版本号2.9.1才能使用

我默默的回去看了一下自己的版本号"vant": "^2.5.8",

当我在犹豫要不要更新的时候，产品大佬又狂追问，修复了吗？

来不及思考了🤠，直接

cnpm install vant@^2.13.2 --save

填坑😋：vant的stepper步进器有点小坑

编程，添加:allow-empty="true"

<van-stepper
    v-model="fild.value"
    :step="fild.step"
    :min=" fild.min"
    :max="fild.max"
    :decimal-length="fild.decimalLength"
    :default-value="null"
    :allow-empty="true"
  />

貌似不太行。

后面发现是default-value=“”就可以了。

其实一开始不生效的时候，怀疑过min是不是应该设置null，才生效。

遇到问题不要慌，先看文档。

❣️真好，步进器可以了。

填坑😋：vant的stepper步进器有点小坑

2.3 cascader

当我继续看其他案例的组件的时候，我发现van-cascader组件竟然报错了。

填坑😋：vant的stepper步进器有点小坑

看看代码写法

填坑😋：vant的stepper步进器有点小坑

我为什么会去看vant的其他组件？这是直觉，这也是我不太敢在已有项目升级库的原因，容易引起副作用。多检查，准没错！

我开始分析这个错误。

说我没有安装这个组件，但这是vant库的呀！

我在局部组件尝试一下引入。

<template>
  <van-cascader v-model="value" :options="options" />
</template>

<script>
import { Cascader as VanCascader } from 'vant';

export default {
  components: {
    VanCascader,
  },
  data() {
    return {
      value: [],
      options: [
        // 你的选项数据
      ],
    };
  },
};
</script>