Vue assembly timeline

Vue assembly timeline

effect

background

  Projects need to use Timeline component for selecting content in different periods of the same notes. Initially intended to use components elementui, but it does not fit, so the Internet search over and over, but can not find a suitable, therefore yourself wrote and recorded as vuejs the study notes.

step

First, create a project environment

slightly. . Baidu

Second, create components

Slightly, nothing to say, is built a .vue file

Third, write code

1) Write a rough framework

Each period is as shown in FIG configuration, the left part is a timeline, the right content.
Component templates as follows:

<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 write timeline

":: before" pseudo-element to the node timeline

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

Renderings:

":: after" pseudo-element to the timeline segments

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

Renderings:

3) improve the style content section

Set index style

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

Renderings:

Content setting section wrap effect

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

4) the effect of adding Rollover

.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" rendered

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>

Renderings:

6) into a parent component transmitted data

javascript:

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

Parent component .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) add a mouse click event

To the "item" to add a mouse click event

<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>

Parent component template:

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

Script data plus parent component of the callback:

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

8) code is complete, add a line item is closed so that the back time

slightlyslightly~ ~ Slightly slightly slightly

End product

Portal

Other components of the timeline

element

Renderings:


Portal

CSDN found

Renderings:

Portal

jq22.com

Renderings:

Portal

techbrood.com

Renderings:

Portal