Vue时间线组件

Vue时间线组件

效果

背景

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

步骤

一、创建项目环境

略。。百度

二、创建组件

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

三、写代码

1）写出大概的框架

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

2）css写出时间线

每一项的样式

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

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

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

效果图:

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

.item::after {
    content: "";
    width: 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 {
  width: 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:

javascript:

效果图:

6) 改成父组件传数据

javascript:

父组件.vue:

7) 添加鼠标点击事件

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

javascript:

父组件template:

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

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

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

略略~略~略略略

成品

传送门

其它时间线组件

ElementUI

效果图:


传送门

CSDN找到的

效果图:

传送门

jq22.com

效果图:

传送门

techbrood.com

效果图:

传送门