美文网首页
时间轴组件(Vue+element)

时间轴组件(Vue+element)

作者: Smile_smile_ | 来源:发表于2020-05-08 19:26 被阅读0次

    说明: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;

    时间轴组件 —— DOM
    时间轴组件 —— JS
    时间轴组件 —— CSS

    相关文章

      网友评论

          本文标题:时间轴组件(Vue+element)

          本文链接:https://www.haomeiwen.com/subject/tkrbwhtx.html