时间轴组件（Vue+element）

JavaScript016

时间轴组件（Vue+element）,第1张

说明：element UI带有时间轴插件（el-timeline），但是只显示无法实现折叠展开功能且比较单一，不满足要求，故重新封装一个； 最终效果： 实现过程：         dom:使用无序标签li 给定title作为时间显示容器：点击时可展开或折叠 使用button标签 ，下面内容部分使用slot传入（里面内容不固定，方便组件复用），嵌套在el-collapse-transition 中以优化动画效果；         js:数据：属性传入dataList:数组，每一项格式为{time:'2019-12-22',content:{},active:false}    时间标题点击事件selectMenu(arr, index)  arr：该方法修改对应时间下内容是否显示；         css:这里需要注意的是时间轴的线不能断，所以li 之间不能有margin 值，左边的线用border-left 生成，时间前面的点使用 i 标签生成，用相对定位且相对左边给一个负的left值，与标题不能换行且要有宽高使用inline-block

TimelineJS 是一个开源库，可以帮助你创建精美、可交互的时间轴。它可以使用Google试算表或基于JSON的REST后端作为数据来源。它可以处理不同种类的内容，从多个来源获取媒体文件，包括：

Twitter

Google Plus

Flickr

Youtube , Vimeo , DailyMotion

Google Maps