Vue时间线组件

Vue时间线组件

效果

背景

  项目需要用到时间线组件，用于选择同一笔记不同时期的内容。一开始打算用elementui的组件，但不适合，于是网上搜了个遍，却没找到合适的，因此自己动手写了个，并记录下来当做vuejs的学习笔记。

步骤

一、创建项目环境

略。。百度

二、创建组件

略，没啥说的，就是新建了个.vue文件

三、写代码

1）写出大概的框架

每个时间段都是如上图所示的结构，左边部分是时间线，右边是内容。
组件模板如下:

<template>
  <div id="time-line">
    <div class="item">
      <div class="item-index">2020-2-2 2:22:22</div>
      <div class="item-content">HELLO WORLD</div>
    </div>
  </div>
</template>

2）css写出时间线

每一项的样式

.item {
  margin-left: 30px; /*用左边margin显示时间线*/
   calc(100% - 30px); /*因为左边部分用于显示时间线，所以右边部分减去30px*/
  height: auto; /*高度由内容决定*/
  position: relative;
  margin-bottom: 10px;
  cursor: pointer;
}

"::before"伪元素作出时间线的节点

.item::before {
  content: "";
   11px;
  height: 11px;
  border-radius: 100%;
  background-color: #91c2fc;
  position: absolute;
  left: -15px;
}

效果图:

"::after"伪元素作出时间线线段

.item::after {
    content: "";
     3px;
    height: calc(100% + 10px); /*加上10px是item底部的margin*/
    background-color: #91c2fc;
    position: absolute;
    top: 0;
    left: -11px;
}

效果图:

3) 完善内容部分的样式

设置index的样式

.item-index {
  line-height: 12px;
  font-size: 12px;
  position: relative;
  color: #656565;
}

效果图:

设置content部分换行效果

.item-content {
   100%;
  height: auto; /*由内容决定*/
  position: relative;
  white-space: pre-wrap; /*保留空白符序列，但是正常地进行换行*/
  word-wrap: break-word; /*在长单词或 URL 地址内部进行换行*/
}

4）添加鼠标悬浮效果

.item:hover::before {
  transform: scale3d(1.2, 1.2, 1);
  background-color: #569ffb;
}

.item:hover::after {
  transform: scale3d(1.1, 1, 1);
  background-color: #569ffb;
}

.item:hover .item-index{
  transform: scale3d(1.01, 1.01, 1);
  color: #343434;
}

5）用“v-for”进行渲染

template:

<template>
  <div id="time-line">
    <div class="item" v-for="item in items" :key="item.index">
      <div class="item-index">{{ item.index }}</div>
      <div class="item-content">{{ item.content }}</div>
    </div>
  </div>
</template>

javascript:

<script>
export default {
  name: "TimeLine",
  data() {
    return {
      items: [
        {
          index: "2020-8-14 13:20:30",
          content: "开始毕设。。"
        },
        { index: "2020-8-15 13:20:30", content: "写前端。。" },
        {
          index: "2020-8-16 13:20:30",
          content: "还在写前端。。"
        },
        {
          index: "2020-8-17 13:20:30",
          content: "仍在写前端。。"
        },
        { index: "2020-8-18 13:20:30", content: "不想写前端。。" },
        { index: "2020-8-19 13:20:30", content: "还得写前端。。。。。" }
      ]
    }
  }
}
</script>

效果图:

6) 改成父组件传数据

javascript:

<script>
export default {
  name: "TimeLine",
  props: {
    items: Array
  },
}
</script>

父组件.vue:

<template>
  <time-line :items="items"></time-line>
</template>

<script>
import TimeLine from "./components/TimeLine";

export default {
  name: 'App',
  components: {
    TimeLine
  },
  data() {
    return {
      items: [
        {
          index: "2020-8-14 13:20:30",
          content: "开始毕设。。"
        },
        { index: "2020-8-15 13:20:30", content: "写前端。。" },
        {
          index: "2020-8-16 13:20:30",
          content: "还在写前端。。"
        },
        {
          index: "2020-8-17 13:20:30",
          content: "仍在写前端。。"
        },
        { index: "2020-8-18 13:20:30", content: "不想写前端。。" },
        { index: "2020-8-19 13:20:30", content: "还得写前端。。。。。" }
      ]
    }
  }
}
</script>

<style scoped></style>

7) 添加鼠标点击事件

给"item"添加鼠标点击事件

<div 
   class="item" 
   v-for="item in items" 
   :key="item.index" 
   @click="onClick(item.index, item.content)"
>

javascript:

<script>
export default {
  name: "TimeLine",
  props: {
    items: Array,
    callBack: Function /*父组件传入*/
  },
  methods: {
    onClick(index, content) {
      if (this.callBack) {
        this.callBack(index, content);
      }
    }
  },
}
</script>

父组件template:

<template>
  <time-line
    :items="items"
    :call-back="timeLineCallBack"
  >
  </time-line>
</template>

父组件script的data加上回调函数:

data() {
  return {
    timeLineCallBack: function(index, content){
      console.info("index:" + index + "
" + "content:" + content);
    },
    items: ...略...
  }
}

8）完善代码，添加一个item让时间线后面闭合

略略~略~略略略

成品

传送门

其它时间线组件

ElementUI

效果图:


传送门

CSDN找到的

效果图:

传送门

jq22.com

效果图:

传送门

techbrood.com

效果图:

传送门