time-axis

time-axis 时间轴,结合timeaxis-item使用

组件结构

  1. <template>
  2. <viewclass="tui-timeaxis-class tui-time-axis">
  3. <slot></slot>
  4. </view>
  5. </template>

组件脚本

  1. <script>
  2. exportdefault{
  3. name:"tuiTimeAxis",
  4. data(){
  5. return{
  6. };
  7. }
  8. }
  9. </script>

组件样式

  1. <style>
  2. .tui-time-axis {
  3. padding-left:20px;
  4. box-sizing: border-box;
  5. position: relative;
  6. }
  7. .tui-time-axis::before {
  8. content:" ";
  9. position: absolute;
  10. left:0;
  11. top:0;
  12. width:1px;
  13. bottom:0;
  14. border-left:1px solid #ddd;
  15. -webkit-transform-origin:00;
  16. transform-origin:00;
  17. -webkit-transform: scaleX(0.5);
  18. transform: scaleX(0.5);
  19. }
  20. </style>

脚本说明

  1. props:
  2. methods:

示例

  1. ...此处省略n行,下载源码查看