分享Vue3组件库搭建（2）：Input组件需要考虑什么（附源码以及预览）

前言

上篇分享如何手写一个Button，如需了解移步：juejin.cn/post/710592…

本篇继续如何手写一个Input。

下篇将继续分享Modal或者Form。有兴趣关注github，CB-UI的搭建，后续将持续分享组件库的搭建过程：github.com/zhuangweizh…

需求分析

具体的需求分析，本片不再废话，直接看下图汇总：

但本篇重点在input本身，扩展功能，配置，校验等，会有专文输出。

实现重点

笔者认为，Input最大的痛点：

• 1）输入过程中值变化限制的问题
• 2）打通校验

这里分享一下步骤一：

const updateValue = (value: any) => {
  // 判断是数字类型
  if (props.type === "number") {
    if (value !== undefined) {
      const dotArray = value.toString().split(".") //小数长度
      // 如果是有小数点限制，需格式化小数点
      if (dotArray.length > 1 && dotArray[1].length > 0) {
        props.toFixed >= 0 && (value = useDealDigit(Number(value), props.toFixed))
      }
    }
    // 如果有最小值限制
    if (props.min !== undefined && value !== "" && value !== undefined && props.min > Number(value)) {
      value = props.min
    }
    // 如果有最大值限制
    if (props.max !== undefined && value !== "" && value !== undefined && props.max < Number(value)) {
      value = props.max
    }
  }

  // 同步显示的ref
  if (inputRef.value && inputRef.value.value !== value) {
    inputRef.value.value = value
  }
  // 更新modelVal
  if (modelVal.value !== value) {
    modelVal.value = value
    emit("update:value", value)
    emit("change", value)
  }
}    

详细逻辑，查看源码。

附上最终结果图例：

源码链接

github: github.com/zhuangweizh…

预览：zhuangweizhan.github.io/cb-ui/dist/…

结语

时间忙碌，草稿版input,仅供参考。

下篇分享Modal或者Form