time-axis

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

组件结构

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

组件脚本

  1. <script>
  2. export default {
  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: 0 0;
  16. transform-origin: 0 0;
  17. -webkit-transform: scaleX(0.5);
  18. transform: scaleX(0.5);
  19. }
  20. </style>

脚本说明

  1. props:
  2. methods:

示例

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