Elementui源码学习模仿一个el-badge标记

.wrap{width:100%;高度：100%；padding:24px;}本文记录一份el-badge标记提示，帮助大家更好的理解饿了么UI轮子的具体工作细节。本文是elementui源码学习模仿系列的另一篇文章，有空会持续更新模仿其他组件。源码在github上，大家可以pull下来，运行npmstart可以帮助大家更好的理解。github仓库地址如下：https://github.com/shuirongsh...知识点的复习还是和往常一样。为了更好的理解代码，我们先回顾一下。el-badge组件中使用的一些曝光不是很高的知识点apisup和sub标签sup标签可以定义文本上标内容（比如方块，立方体，未读消息等...）sub标签可以定义文本下标内容（一般更科学的公式）代码示例：

未读新闻99+

水是生命之源，化学式为：H2O

效果图：由此我们可以了解到sup标签中写的文字会自动放在右上角，也可以设置样式通常情况下，所以使用sup标签来制作el-badge标签组件，确实比较合适。但是因为需要使用slot来传入定义的内容，所以饿了么UI中sup标签的使用并不像上面的嵌套，相当于并排，如：

未读消息

99+所以饿了么通过style定位修改位置，使其在右上角的props中有validator功能假设需求：值为父组件传给子组件的age属性字段如果需要是数字类型，我们通常这样写：props:{age:Number,}，或者这样写（另外指定一个默认值）：props:{age:{type:Number,default:100,}}，这样写一般情况下就可以了，但是如果要细化验证，需要使用props来验证属性字段自带的validator函数。比如一个新的需求：父子传给儿子的年龄属性字段必须是数字类型，不能超过180。因此，我们可以使用验证器函数这样写：props:{age:{type:Number,default:100,validator(val){//validator函数接收到的参数是parent传递给child的这个字段的值if(val<=180){returntrue;//返回true表示验证通过，不报[Vuewarn]警告}else{returnfalse;//返回false表示验证失败，报一个[Vuewarn]警告，告知用户传递的值不正确}},},}这种情况下，精细控制传递的参数确实更方便从父母到孩子。官方说明：https://cn.vuejs.org/v2/guide...使用代码模仿效果图.wrap{width:100%;高度：100%；padding:24px;}仿封装代码