elementui源码学习之仿写一个el-badge标记

本篇文章记录一下，仿写一个el-badge标记提示，有助于大家更好理解，饿了么ui的轮子具体工作细节。本文是elementui源码学习仿写系列的又一篇文章，后续空闲了会不断更新并仿写其他组件。源码在github上，大家可以拉下来，npm start运行跑起来，有助于更好的理解。github仓库地址如下：https://github.com/shuirongsh...

知识点复习

还是像往常一样，为了便于更好的理解代码，咱们先复习一下，el-badge组件中使用的一些曝光度不是非常高的知识点api

sup和sub标签

• sup标签可定义文本上标内容（如平方、立方、未读消息等...）
• sub标签可定义文本下标内容（一般是科学公式多一些）

代码举例：

未读消息99+
水是生命之源，化学分子式为：H2O

效果图：

由此我们可以明了，sup标签内写的文字，会自动放在右上方，也可以正常设置样式，所以使用sup标签用来做el-badge标记组件，的确是比较合适的。

不过因为需要使用插槽传入定义内容，所以饿了么UI中使用sup标签不像上述嵌套的，相当于并排的，如：

未读消息

⁹⁹⁺ 所以饿了么又通过样式定位修改其位置，使其在右上角了

props中的validator校验函数

假设需求：父组件传递给子组件的age属性字段的值需要为数字类型的

我们一般都会这样写：

props: {
    age: Number,
},

或者这样写（额外指定一个默认值）：

props: {
  age: {
    type: Number,
    default: 100,
  }
},

这样写一般也就够用了，不过如果要精细化校验，就需要使用props校验某个属性字段自带的validator函数了。

比如新需求：父传子的age属性字段需为数字类型、且不能超过180

于是乎，我们使用validator函数可以这样写：

props: {
    age: {
      type: Number,
      default: 100,
      validator(val) { // validator函数接收的参数是父传子此字段的值
        if (val <= 180) {
          return true; // 返回true代表校验通过，不报[Vue warn]警告
        } else {
          return false; // 返回false代表校验不通过，报[Vue warn]警告，告知用户传值不对
        }
      },
    },
}

这样的话，的确是更方便精细化控制父传子参数了。官方说明：https://cn.vuejs.org/v2/guide...

仿写效果图

使用代码

仿写封装代码

总结

好了，一篇water文章写完啦（手动捂脸哭），不过愚以为不断学习、不断输出、大抵便是不断进步吧