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写出时间线 "::before"伪元素作出时间线的节点 .item::before { content: ""; width: 11px; height: 11px; border-radius: 100%; background-color: #91c2fc; position: absolute; left: -15px; } 效果图: "::after"伪元素作出时间线线段 .item::after {