elementui源码学习之仿写一个el-tag

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

组件需求分析

关于tag组件，主要是用于展示一些标签信息，一般的需求有如下：

• tag标签文字颜色自定义
• tag标签背景色自定义
• tag标签边框颜色自定义
• 控制是否展示关闭tag标签小叉号图标
• 自定义tag标签的文字颜色、背景色、边框颜色
• 标签的大小类型（大型、中型、小型标签）

饿了么官方使用的是render函数编写的el-tag，所以这里咱们也使用render函数去写。整体来说，这个组件还是比较简单的。注意一下jsx的语法即可。

组件效果图

看效果的话，直接复制粘贴运行跑起来，结合注释更有助于理解。最完整的代码在github上哦

使用之代码

<template>
  <div>
    <my-divider lineType="dotted" content-position="left"
      >默认标签样式</my-divider
    >
    <my-tag>默认标签</my-tag>
    <my-tag closable>默认标签可关闭</my-tag>

    <my-divider lineType="dotted" content-position="left"
      >类型标签样式</my-divider
    >
    <my-tag type="primary">类型标签primary</my-tag>
    <my-tag type="primary" closable>类型标签primary可关闭</my-tag>
    <my-tag type="success">类型标签success</my-tag>
    <my-tag type="success" closable>类型标签success可关闭</my-tag>
    <my-tag type="info">类型标签info</my-tag>
    <my-tag type="info" closable>类型标签info可关闭</my-tag>
    <my-tag type="warning">类型标签warning</my-tag>
    <my-tag type="warning" closable>类型标签warning可关闭</my-tag>
    <my-tag type="danger">类型标签danger</my-tag>
    <my-tag type="danger" closable>类型标签danger可关闭</my-tag>

    <my-divider lineType="dotted" content-position="left"
      >自定义标签样式</my-divider
    >
    <my-tag color="blue">标签文字颜色自定义</my-tag>
    <my-tag bgColor="pink">标签背景颜色自定义</my-tag>
    <my-tag borderColor="red">标签边框颜色自定义</my-tag>
    
    <my-divider lineType="dotted" content-position="left"
      >中等标签及大型标签</my-divider
    >
    <my-tag type="primary" sizeType="big" closable>大型标签</my-tag>
    <my-tag type="success" sizeType="medium" closable>中型标签</my-tag>
    <my-tag style="cursor: pointer" type="info" sizeType="small"
      >默认(小型)标签，sizeType="small"写不写都行的</my-tag
    >

    <my-divider lineType="dotted" content-position="left"
      >动态编辑标签</my-divider
    >
    <my-tag
      v-for="(item, index) in arr"
      closable
      @close="handleClose(item)"
      @click="handleClick(item)"
      type="success"
      :key="item"
      >{{ item }}</my-tag
    >
    <el-input
      v-model.trim="val"
      @blur="blurFn"
      size="mini"
      style="width: 120px"
    ></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ["标签一", "标签二", "标签三"],
      val: "",
    };
  },
  methods: {
    blurFn() {
      if (this.val === "") return;
      this.arr.push(this.val);
      this.val = "";
    },
    handleClose(tag) {
      // 找到点击的是哪个
      let i = this.arr.findIndex((item) => {
        return tag === item;
      });
      // 删除之
      this.arr.splice(i, 1);
    },
    handleClick(tag) {
      console.log("点击标签啦", tag);
    },
  },
};
</script>

封装组件的代码

<script>
const typeArr = ["primary", "success", "info", "warning", "danger"]; // 标签类型数组
const sizeType = ["big", "medium", "small"]; // 标签大小数组
export default {
  name: "myTag",
  props: {
    closable: Boolean, // 是否展示可关闭的小叉号图标
    color: String, // 标签文字的颜色
    bgColor: String, // 标签背景色
    borderColor: String, // 标签边框颜色
    // 五种标签类型
    type: {
      type: String,
      validator(val) {
        return typeArr.includes(val); // 校验类型
      },
    },
    // 三种标签大小
    sizeType: {
      type: String,
      validator(val) {
        return sizeType.includes(val); // 校验大小
      },
    },
  },
  methods: {
    handleClose(event) {
      /* 阻止冒泡防止与下方的handleClick方法冲突，要不然点击close关闭小图标，也会
         触发下方click事件的执行。即：内层事件阻止冒泡与外层事件隔离开来 */
      event.stopPropagation();
      this.$emit("close", event);
    },
    handleClick(event) {
      this.$emit("click", event);
    },
  },
  // render函数jsx语法更加灵活
  render(h) {
    // 1. 准备样式类 class绑定classArr数组常用样式，style绑定props变量自定义样式
    const classArr = ["my-tag", this.type, this.sizeType];
    // 2. 准备一个dom，并绑定相关class、style、event
    const tagEl = (
      <span
        class={classArr}
        style={{
          backgroundColor: this.bgColor,
          color: this.color,
          borderColor: this.borderColor,
        }}
        on-click={this.handleClick}
      >
        {/* 默认插槽渲染内容即my-tag标签中的文字 */}
        {this.$slots.default}
        {/* 三元表达式条件控制是否渲染关闭小图标 */}
        {this.closable ? (
          <span class="close-tag" on-click={this.handleClose}>
            x
          </span>
        ) : null}
      </span>
    );
    // 3. 返回render渲染之
    return <transition name="el-fade-in">{tagEl}</transition>;
    // 使用饿了么UI自带的渐变过渡动画
  },
};
</script>
<style scoped>
/* 默认标签样式 */
.my-tag {
  display: inline-block;
  box-sizing: border-box;
  padding: 0 8px;
  color: #252525;
  background-color: #fafafa;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  height: auto;
  line-height: 20px;
  margin: 0 8px 8px 0;
}
/* 标签关闭小叉号样式 */
.close-tag {
  position: relative;
  margin-left: 5px;
  cursor: pointer;
  display: inline-block;
  transform: translateY(-6%);
}
/* 5种类型标签样式 */
.primary {
  color: #409eff;
  border: 1px solid #d9ecff;
  background-color: #ecf5ff;
}
.success {
  background-color: #f0f9eb;
  border-color: #e1f3d8;
  color: #67c23a;
}
.info {
  background-color: #f4f4f5;
  border-color: #e9e9eb;
  color: #909399;
}
.warning {
  background-color: #fdf6ec;
  border-color: #faecd8;
  color: #e6a23c;
}
.danger {
  background-color: #fef0f0;
  border-color: #fde2e2;
  color: #f56c6c;
}
/* 默认小型标签样式，可选值为中等标签、大型标签。当然这里没有small，因为small就是默认的 */
.big {
  padding: 4px 10px;
}
.medium {
  padding: 2px 10px;
}
</style>

总结

• 大家封装自己的组件的时候，最好借鉴其他UI组件库，比如这里仿写el-tag也是参照了antD的设计方式。
• 再一个就是仿写组件，不是把官方的组件全部照搬过来，而是适当取舍，保留比较常用的组件功能，暂时摒弃冷门组件功能，并加入自己公司常用的功能，以及自己的理解
• 如果有遇到冷门的组件功能，可以考虑再单独封装一个组件去解决
• 组件需要集成一些功能，但是不能集成非常多的功能，高内聚
• 本人水平有限，说的不一定对，仅供各位道友参考 ^_^