u-time-line-item.vue 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <template>
  2. <view class="u-time-axis-item">
  3. <slot name="content" />
  4. <view class="u-time-axis-node" :style="[nodeStyle]">
  5. <slot name="node">
  6. <view class="u-dot">
  7. </view>
  8. </slot>
  9. </view>
  10. </view>
  11. </template>
  12. <script>
  13. /**
  14. * timeLineItem 时间轴Item
  15. * @description 时间轴组件一般用于物流信息展示,各种跟时间相关的记录等场景。(搭配u-time-line使用)
  16. * @tutorial https://www.uviewui.com/components/timeLine.html
  17. * @property {String} bg-color 左边节点的背景颜色,一般通过slot内容自定义背景颜色即可(默认#ffffff)
  18. * @property {String Number} node-top 节点左边图标绝对定位的top值,单位rpx
  19. * @example <u-time-line-item node-top="2">...</u-time-line-item>
  20. */
  21. export default {
  22. name: "u-time-line-item",
  23. props: {
  24. // 节点的背景颜色
  25. bgColor: {
  26. type: String,
  27. default: "#ffffff"
  28. },
  29. // 节点左边图标绝对定位的top值
  30. nodeTop: {
  31. type: [String, Number],
  32. default: ""
  33. }
  34. },
  35. data() {
  36. return {
  37. }
  38. },
  39. computed: {
  40. nodeStyle() {
  41. let style = {
  42. backgroundColor: this.bgColor,
  43. };
  44. if (this.nodeTop != "") style.top = this.nodeTop + 'rpx';
  45. return style;
  46. }
  47. }
  48. }
  49. </script>
  50. <style lang="scss" scoped>
  51. @import "../../libs/css/style.components.scss";
  52. .u-time-axis-item {
  53. @include vue-flex;
  54. flex-direction: column;
  55. width: 100%;
  56. position: relative;
  57. margin-bottom: 32rpx;
  58. }
  59. .u-time-axis-node {
  60. position: absolute;
  61. top: 12rpx;
  62. left: -40rpx;
  63. transform-origin: 0;
  64. transform: translateX(-50%);
  65. @include vue-flex;
  66. align-items: center;
  67. justify-content: center;
  68. z-index: 1;
  69. font-size: 24rpx;
  70. }
  71. .u-dot {
  72. height: 16rpx;
  73. width: 16rpx;
  74. border-radius: 100rpx;
  75. background: #ddd;
  76. }
  77. </style>