关于element-ui:elementui源码学习之仿写一个eltimeline

本篇文章记录仿写一个el-timeline组件细节，从而有助于大家更好了解饿了么ui对应组件具体工作细节。本文是elementui源码学习仿写系列的又一篇文章，后续闲暇了会不断更新并仿写其余组件。源码在github上，大家能够拉下来，npm start运行跑起来，联合正文有助于更好的了解。github仓库地址如下：github.com/shuirongshu…

组件剖析

组件形成局部

工夫线组件形成局部可分为四局部：

工夫线小圆点
工夫线竖线条
工夫戳
具体内容详情

如下图：

所以针对工夫线组件的需要，次要是从这四个角度去管制。个别工夫线组件需要如下：

组件需要剖析

对于分割线的组件，个别应用的场景需要有：

比方依照工夫线正序或顺叙的展现（如：日志记录）
比方默认的工夫线小圆点的款式色彩，以及能够自定义色彩（这里默认蓝色圆环）
比方也能够应用小图标代替工夫线小圆点（例，应用饿了么图标）
应用了饿了么小图标，有时候还须要给图标上色
比方管制工夫戳和具体内容详情的地位（这里默认工夫戳在上方，有时候工夫戳可能在下方）
有的时候，可能不须要展现工夫戳，只须要展现内容，所以要再加一个是否暗藏工夫戳的变量

对于官网组件的集体认识：

1.官网组件的provide和inject能够拿掉，如下图：

2.官网组件管制工夫戳地位用了两份dom，能够更改为一份dom搭配弹性盒方向管制

3.参考各方对仿写封装组件做一个简洁的解决

大家能够看一下antd和iview的工夫线组件，参数确实是比饿了么的工夫线组件少一些。

antd：https://ant.design/components…

iview：https://www.iviewui.com/view-…

个人观点不肯定对，仅供参考

组件中回顾知识点

温故而知新

this.$slots.default.reverse()

默认插槽数组this.$slots.default，也是数组，所以也是能够应用数组的办法的。

这里管制工夫线的正序顺叙就是应用了，这个办法

:style中写四元表达式

冒号style其实也是能够写三元、或者四元或者更多元的，蕴含变量的表达式，如下：

<div
      class="dots"
      :style="{
        border: elementIcon
          ? 'none'
          : borderColor
          ? `2px solid ${borderColor}`
          : '2px solid #1890ff',
      }"
    >
</div>

粗心：通过:style给class为dots的dom元素设置border边框款式，具体边框的值取决于elementIcon和borderColor这两个变量的值。

代码

演示的话，间接复制粘贴即可应用。当然残缺的代码在github上哦^_^

咱们先看一下效果图，再看一下代码

效果图

应用组件代码

<template>
  <div>
    <!-- 一般应用工夫正序排列 -->
    <button @click="reverse = !reverse">点击更改工夫线排序</button>
    <my-timeline style="margin-top: 6px" :reverse="reverse">
      <my-timeline-item timestamp="2018-01-01"
        >2018年好像还在昨天一样</my-timeline-item
      >
      <my-timeline-item timestamp="2020-01-01"
        >2020就像刚刚过来一样</my-timeline-item
      >
      <my-timeline-item timestamp="2022-01-01"
        >2022年也曾经走完一半了</my-timeline-item
      >
    </my-timeline>
    <br />
    <!-- 自定义工夫线圆点色彩或应用饿了么小图标 -->
    <my-timeline>
      <my-timeline-item
        v-for="(item, index) in timeArr"
        :key="index"
        :timestamp="item.timestamp"
        :borderColor="item.borderColor"
        :elementIcon="item.elementIcon"
        :iconColor="item.iconColor"
        >{{ item.content }}</my-timeline-item
      >
    </my-timeline>
    <br />
    <!-- 管制工夫戳地位与是否暗藏工夫戳 -->
    <my-timeline>
      <my-timeline-item timestamp="2222-02-02"
        >默认工夫戳在文字上方</my-timeline-item
      >
      <my-timeline-item timestamp="3333-03-03" timeLocation="down"
        >通过timeLocation属性将工夫戳放在文字下方</my-timeline-item
      >
      <my-timeline-item timestamp="4444-04-04" hideTimestamp
        >若不想要工夫戳可应用hideTimestamp属性将其暗藏</my-timeline-item
      >
    </my-timeline>
  </div>
</template>

<script>
export default {
  data() {
    return {
      reverse: false,
      timeArr: [
        {
          timestamp: "2022-04-01",
          content: "默认工夫线小圆点款式",
        },
        {
          timestamp: "2022-05-01",
          content: "更改工夫线小圆点色彩",
          borderColor: "red",
        },
        {
          timestamp: "2022-04-01",
          content: "应用饿了么的小图标做为工夫线小圆点",
          elementIcon: "el-icon-view",
        },
        {
          timestamp: "2022-07-01",
          content: "给饿了么的icon上色",
          elementIcon: "el-icon-location",
          iconColor: "green",
        },
      ],
    };
  },
};
</script>

myTimeline代码

<script>
export default {
  name: "myTimeline",
  // 外层组件只承受一个参数即是否反转，内层组件的参数多一些
  props: {
    reverse: {
      // 是否反转，即管制工夫排序形式
      type: Boolean,
      default: false, // 默认从上往下
    },
  },
  // 应用render函数渲染数据
  render() {
    const reverse = this.reverse;
    const classes = {
      "my-timeline": true,
      "is-reverse": reverse,
    };
    let slots = this.$slots.default || []; // 获取默认插槽数组
    if (reverse) {
      slots = slots.reverse(); // 默认插槽数组，也是数组，所以也是能够应用reverse办法做反转的
    }
    // 加上动静class  并传递默认插槽
    return <ul class={classes}>{slots}</ul>;
    // 整体工夫线构造就是ul搭配li，一个li代表一项工夫线
  },
};
</script>

<style lang="less">
.my-timeline,
.my-timeline .timeLineItem {
  list-style: none;
}
// 把最初一条竖向工夫线暗藏
.my-timeline .timeLineItem:last-child .verticalLine {
  display: none;
}
</style>

myTimelineItem代码

<template>
  <li class="timeLineItem">
    <!-- 垂直方向的线条 -->
    <div class="verticalLine"></div>
    <!-- 垂直方向的小圆点 -->
    <div
      class="dots"
      :style="{
        border: elementIcon
          ? 'none'
          : borderColor
          ? `2px solid ${borderColor}`
          : '2px solid #1890ff',
      }"
    >
      <!-- 上述三元表达式意思：
              当传了elementIcon时，阐明要应用饿了么UI的图标，即不应用border了，故为none；
              当未传elementIcon时，再看是否传了borderColor了，若传了，就应用传递的borderColor作为
              border-color的值，否则就应用默认的#1890ff为边框色
      -->
      <i
        v-if="elementIcon"
        :style="{ color: iconColor }"
        :class="elementIcon"
      ></i>
    </div>
    <!-- 内容区，通过flex-direction管制工夫和细节的高低地位 -->
    <div class="content" :class="{ isSetTimeDown: timeLocation == 'down' }">
      <!-- 内容区的工夫 -->
      <div class="contentTime" v-if="!hideTimestamp">{{ timestamp }}</div>
      <!-- 内容区的具体细节 -->
      <div class="contentDetail">
        <slot></slot>
      </div>
    </div>
  </li>
</template>

<script>
export default {
  name: "myTimelineItem",
  props: {
    // 工夫戳具体值
    timestamp: String,
    // 是否暗藏工夫戳，只展现文字内容
    hideTimestamp: {
      type: Boolean,
      default: false, // 默认显示工夫戳
    },
    // 工夫戳的地位，默认工夫戳地位在上方
    timeLocation: String,
    // 指定工夫线条连贯的小圆点的边框色
    borderColor: String,
    // 应用饿了么UI的图标替换节点小圆点，如 el-icon-more
    elementIcon: String,
    // 设置饿了么UI图标的色彩
    iconColor: String,
  },
};
</script>

<style scoped lang="less">
.timeLineItem {
  position: relative; // 定位管制工夫线和小圆点的地位细节
  padding-bottom: 12px;
  .verticalLine {
    width: 2px;
    height: 100%;
    background-color: #e9e9e9;
    // 定位管制
    position: absolute;
    top: 4px;
  }
  .dots {
    width: 12px;
    height: 12px;
    background-color: #fff;
    border-radius: 50%;
    // 通过定位将小圆点挪动到左侧工夫线上方
    position: absolute;
    left: -5px;
    top: 4px;
    i {
      position: absolute;
      left: -2px;
      top: -2px;
    }
  }
  .content {
    padding-left: 24px;
    display: flex;
    // 通过弹性盒方向管制contentTime和contentDetail的高低地位(默认工夫在上方)
    flex-direction: column;
    .contentTime {
      margin-bottom: 6px;
      font-size: 13px;
      color: #666;
    }
    .contentDetail {
      margin-bottom: 6px;
      font-size: 14px;
      color: #333;
    }
  }
  // 是否让工夫在下方，取决于是否timeLocation的值是否为down
  .isSetTimeDown {
    flex-direction: column-reverse;
  }
}
</style>

如果对您有一点点帮忙的话，欢送github不吝star哦^O^

关于element-ui:elementui源码学习之仿写一个eltimeline

组件剖析

组件形成局部

组件需要剖析

对于官网组件的集体认识：

组件中回顾知识点

this.$slots.default.reverse()

:style中写四元表达式

代码

效果图

应用组件代码

myTimeline代码

myTimelineItem代码

评论

发表回复取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

关于element-ui:elementui源码学习之仿写一个eltimeline

组件剖析

组件形成局部

组件需要剖析

对于官网组件的集体认识：

组件中回顾知识点

this.$slots.default.reverse()

:style中写四元表达式

代码

效果图

应用组件代码

myTimeline代码

myTimelineItem代码

评论

发表回复 取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

发表回复取消回复