vue-mooc

Timeline 时间线

用法

时间线组件，用timeline和timeline-item两个组件，通过传递timestamp来结合一起使用。

基础用法

通过在timeline-item上循环遍历输出timestamp和自定义内容，达到组合成时间线的目的。

  • 成立
    2015-09-01
  • 高速发展
    2016-09-01
  • 上市
    2018-09-01
  • 至今
    2019-09-13
  • 至今
    2019-09-13
  • 上市
    2018-09-01
  • 高速发展
    2016-09-01
  • 成立
    2015-09-01
正序
反序










 








<!-- 正序 -->
<mooc-timeline>
  <mooc-timeline-item
    v-for="(item,index) in timeline"
    :key="index"
    :timestamp="item.timestamp"> 
    {{item.content}}
  </mooc-timeline-item>
</mooc-timeline>
<!-- 反序 -->
<mooc-timeline :reverse="true">
  <mooc-timeline-item
    v-for="(item,index) in timeline"
    :key="index"
    :timestamp="item.timestamp"> 
    {{item.content}}
  </mooc-timeline-item>
</mooc-timeline>

export default {
  data () {
    return {
      timeline: []
    }
  },
  created () {
    this.timeline = [
      { timestamp: '2015-09-01', content: '成立' },
      { timestamp: '2016-09-01', content: '高速发展' },
      { timestamp: '2018-09-01', content: '上市' },
      { timestamp: '2019-09-13', content: '至今' }
    ]
  }
}

不同的颜色

通过传递color，来实现不同颜色的timeline节点。

  • 成立
    2015-09-01
  • 高速发展
    2016-09-01
  • 上市
    2018-09-01
  • 至今
    2019-09-13
  • 成立
    2015-09-01
  • 高速发展
    2016-09-01
  • 上市
    2018-09-01
  • 至今
    2019-09-13
默认颜色
自定义颜色













 




<!-- 默认颜色 -->
<mooc-timeline>
  <mooc-timeline-item
    v-for="(item,index) in timeline"
    :timestamp="item.timestamp"> 
    {{item.content}}
  </mooc-timeline-item>
</mooc-timeline>
<!-- 自定义颜色 -->
<mooc-timeline>
  <mooc-timeline-item
    v-for="(item,index) in timeline"
    :timestamp="item.timestamp"
    :color="item.color"> 
    {{item.content}}
  </mooc-timeline-item>
</mooc-timeline>

export default {
  data () {
    return {
      timeline: []
    }
  },
  created () {
    this.timeline = [
      { timestamp: '2015-09-01', color: '#58a', content: '成立' },
      { timestamp: '2016-09-01', color: '#f60', content: '高速发展' },
      { timestamp: '2018-09-01', color: '#f01414', content: '上市' },
      { timestamp: '2019-09-13', color: '#00b43c', content: '至今' }
    ]
  }
}

不同的类型

通过传递type，来实现不同类型的timeline节点，其中type为基础类型primary, success, warning, danger和info其中之一，它和color属性一样，只影响节点的颜色。

  • 成立
    2015-09-01
  • 高速发展
    2016-09-01
  • 上市
    2018-09-01
  • 至今
    2019-09-13
  • 成立
    2015-09-01
  • 高速发展
    2016-09-01
  • 上市
    2018-09-01
  • 至今
    2019-09-13
默认
自定义类型













 




<!-- 默认 -->
<mooc-timeline>
  <mooc-timeline-item
    v-for="(item,index) in timeline"
    :timestamp="item.timestamp"> 
    {{item.content}}
  </mooc-timeline-item>
</mooc-timeline>
<!-- 自定义类型 -->
<mooc-timeline>
  <mooc-timeline-item
    v-for="(item,index) in timeline"
    :timestamp="item.timestamp"
    :type="item.type"> 
    {{item.content}}
  </mooc-timeline-item>
</mooc-timeline>

export default {
  data () {
    return {
      timeline: []
    }
  },
  created () {
    this.timeline = [
      { timestamp: '2015-09-01', type: 'primary', content: '成立' },
      { timestamp: '2016-09-01', type: 'warning', content: '高速发展' },
      { timestamp: '2018-09-01', type: 'danger', content: '上市' },
      { timestamp: '2019-09-13', type: 'success', content: '至今' }
    ]
  }
}

不同的大小

通过传递size，来实现不同大小的timeline节点，其中size为必须为small, normal, medium和`large其中之一，它只影响节点的大小。

  • 成立
    2015-09-01
  • 高速发展
    2016-09-01
  • 上市
    2018-09-01
  • 至今
    2019-09-13
  • 成立
    2015-09-01
  • 高速发展
    2016-09-01
  • 上市
    2018-09-01
  • 至今
    2019-09-13
默认12px
自定义大小













 




<!-- 默认 -->
<mooc-timeline>
  <mooc-timeline-item
    v-for="(item,index) in timeline"
    :timestamp="item.timestamp"> 
    {{item.content}}
  </mooc-timeline-item>
</mooc-timeline>
<!-- 自定义类型 -->
<mooc-timeline>
  <mooc-timeline-item
    v-for="(item,index) in timeline"
    :timestamp="item.timestamp"
    :type="item.type"> 
    {{item.content}}
  </mooc-timeline-item>
</mooc-timeline>

export default {
  data () {
    return {
      timeline: []
    }
  },
  created () {
    this.timeline = [
      { timestamp: '2015-09-01', color: '#58a', size: 'small', content: '成立' },
      { timestamp: '2016-09-01', color: '#f60', size: 'normal', content: '高速发展' },
      { timestamp: '2018-09-01', color: '#f01414', size: 'medium', content: '上市' },
      { timestamp: '2019-09-13', color: '#00b43c', size: 'large', content: '至今' }
    ]
  }
}

不同的位置

通过传递placement，其中值必须为top或者bottom其中之一，来控制时间戳显示的位置。

  • 成立
    2015-09-01
  • 高速发展
    2016-09-01
  • 上市
    2018-09-01
  • 至今
    2019-09-13
  • 2015-09-01
    成立
  • 2016-09-01
    高速发展
  • 2018-09-01
    上市
  • 2019-09-13
    至今
默认底部
自定义顶部













 





<!-- 默认底部 -->
<mooc-timeline>
  <mooc-timeline-item
    v-for="(item,index) in timeline"
    :timestamp="item.timestamp"> 
    {{item.content}}
  </mooc-timeline-item>
</mooc-timeline>
<!-- 自定义顶部 -->
<mooc-timeline>
  <mooc-timeline-item
    v-for="(item,index) in timeline"
    :timestamp="item.timestamp"
    :placement="item.placement"
    :color="item.color"> 
    {{item.content}}
  </mooc-timeline-item>
</mooc-timeline>

export default {
  data () {
    return {
      timeline: []
    }
  },
  created () {
    this.timeline = [
      { timestamp: '2015-09-01', color: '#58a', size: 'small', content: '成立', placement: 'top' },
      { timestamp: '2016-09-01', color: '#f60', size: 'normal', content: '高速发展', placement: 'top' },
      { timestamp: '2018-09-01', color: '#f01414', size: 'medium', content: '上市', placement: 'top' },
      { timestamp: '2019-09-13', color: '#00b43c', size: 'large', content: '至今', placement: 'top' }
    ]
  }
}

是否显示时间戳

通过传递hideTimestamp，来控制是否显示时间戳。

  • 成立
    2015-09-01
  • 高速发展
    2016-09-01
  • 上市
    2018-09-01
  • 至今
    2019-09-13
  • 成立
  • 高速发展
  • 上市
  • 至今
默认
不显示时间戳












 





<!-- 默认 -->
<mooc-timeline>
  <mooc-timeline-item
    v-for="(item,index) in timeline"
    :timestamp="item.timestamp"> 
    {{item.content}}
  </mooc-timeline-item>
</mooc-timeline>
<!-- 不显示时间戳 -->
<mooc-timeline>
  <mooc-timeline-item
    v-for="(item,index) in timeline"
    :hide-timestamp="true"
    :timestamp="item.timestamp"> 
    {{item.content}}
  </mooc-timeline-item>
</mooc-timeline>

export default {
  data () {
    return {
      timeline: []
    }
  },
  created () {
    this.timeline = [
      { timestamp: '2015-09-01', content: '成立' },
      { timestamp: '2016-09-01', content: '高速发展' },
      { timestamp: '2018-09-01', content: '上市' },
      { timestamp: '2019-09-13', content: '至今' }
    ]
  }
}

自定义节点

除了通过以上的属性来控制timeline以外，我们还可以通过插槽的形式，定义自定义节点。

  • 1
    成立
    2015-09-01
  • 2
    高速发展
    2016-09-01
  • 3
    上市
    2018-09-01
  • 4
    至今
    2019-09-13 
<!-- 自定义dot -->
<mooc-timeline>
  <mooc-timeline-item
    v-for="(item,index) in timeline"
    :timestamp="item.timestamp"> 
    <div class="my-dot" slot="dot">{{index+1}}</div> 
    {{item.content}}
  </mooc-timeline-item>
</mooc-timeline>

.my-dot
  z-index: 10;
  position: relative;
  color: #fff;
  line-height: 20px
  &::after
    content: '';
    position: absolute;
    left: -5px;
    top: 0;
    width: 20px;
    height: 20px;
    background-color: #f60;
    transform: rotate(45deg);

自定义内容

可以通过默认的内容插槽，来实现自定义的content。

  • 2015-09-01
    成立
  • 2016-09-01
    高速发展
  • 2018-09-01
    上市
  • 2019-09-13
    至今
<mooc-timeline>
  <mooc-timeline-item
    v-for="(item,index) in timeline"
    placement="top"
    :timestamp="item.timestamp"> 
    <div class="my-content">{{item.content}}</div> 
  </mooc-timeline-item>
</mooc-timeline>

.my-content
  width: 500px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(7,17,27,0.1);

属性

timeline 属性

属性名称 类型 默认值 说明
reverse Boolean false 是否反转时间轴

timeline-item 属性

属性名称 类型 默认值 说明
timestamp String - 时间戳
hideTimestamp Boolean false 是否隐藏时间轴
placement Sring bottom 时间轴的位置，必须为top或bottom之一
size Sring small 节点的大小，必须为small,normal,medium和large其中之一
type Sring - 节点的类型，必须为primary,success,warning,danger和info其中之一
color Sring - 节点的颜色，如同时传递了type，则type会被color覆盖，无效。
最后更新时间: 9/17/2019, 10:55:33 PM

← Progress 进度条 →