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

本篇文章记录一下，仿写一个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标签不像上述嵌套的，相当于并排的，如：未读消息99+ 所以饿了么又通过样式定位修改其位置，使其在右上角了
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...
仿写效果图

文章图片

使用代码

.wrap { width: 100%; height: 100%; padding: 24px; }

仿写封装代码

.my-badge { position: relative; vertical-align: middle; display: inline-block; // 把块元素转换成行内块元素，如此，宽度便由内容撑开了 // 通过定位，把上标定位到右上角的哦 .fixedRightTop { position: absolute; // 因为上方display: inline-block; 了 top: 0; // 所以定位才正好在插槽内容的右上方了，否则块元素默认宽度100%，那定位就在最右侧了 right: 3px; // 但是还需要transform平移一下 } sup { color: #fff; background-color: #f56c6c; // 默认淡红色 border-radius: 10px; // 加个圆角好看些 padding: 1px 4px; font-size: 12px; // 上标字体要设置最小 transform: translate(100%, -50%); // 要移动一下才行 white-space: nowrap; // 自定义文字内容会换行，通过css控制，使之不换行 } // 五种类型配色，这里直接抄官方的 .primary { background-color: #409eff; } .success { background-color: #67c23a; } .warning { background-color: #e6a23c; } .info { background-color: #909399; } .danger { background-color: #f56c6c; } // 小圆点加样式 .isDotClass { height: 8px; width: 8px; right: 1px; border-radius: 50%; } }

总结 【elementui源码学习之仿写一个el-badge标记】好了，一篇water文章写完啦（手动捂脸哭），不过愚以为不断学习、不断输出、大抵便是不断进步吧