【源码共读】第42期 | 跟着 vant4 源码学习如何用 vue3+ts 开发一个 loading 组件

前言

• 本文参加了由公众号@若川视野 发起的每周源码共读活动，点击了解详情一起参与。

• 这是源码共读的第42期，链接：juejin.cn/post/720672… 。

清单

如何用 vue3 + ts 开发一个 loading 组件

loading如何封装

• loading中主要包含icon和text的组件
• renderIcon中icon来源两个方向，一个是通过prop.type的方式，另一种是通过slots自定义icon
• renderText函数通过slots.default的方式传入文本；

• loading提供了两种默认的icon图标，里面的实现方式，一个是通过i标签生成，一个是通过svg实现

export const isDef = <T>(val: T): val is NonNullable<T> =>
  val !== undefined && val !== null;
  
export const isNumeric = (val: Numeric): val is string =>
  typeof val === 'number' || /^\d+(\.\d+)?$/.test(val);
  
export function addUnit(value?: Numeric): string | undefined {
  if (isDef(value)) {
    return isNumeric(value) ? `${value}px` : String(value);
  }
  return undefined;
}

• 如何判断添加单位？先判断是否存在，然后确定是否是number类型，最后再做处理是否添加px单位

总结

通过对van-loading组件源码的学习，看到了loading中专门的函数做专门的事就比如renderIcon和renderText,也看到了函数尽量简化，能抽取成工具函数或单独处理的函数尽量抽取，保证函数的单一性，这样代码即方便阅读也方便管理，文中对class的处理也是一个值得学习的地方。