u-time-line-item.vue 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  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. computed: {
  39. nodeStyle() {
  40. let style = {
  41. backgroundColor: this.bgColor,
  42. };
  43. if (this.nodeTop != "") style.top = this.nodeTop + 'rpx';
  44. return style;
  45. }
  46. }
  47. }
  48. </script>
  49. <style lang="scss" scoped>
  50. @import "../../libs/css/style.components.scss";
  51. .u-time-axis-item {
  52. @include vue-flex;
  53. flex-direction: column;
  54. width: 100%;
  55. position: relative;
  56. margin-bottom: 32 rpx;
  57. }
  58. .u-time-axis-node {
  59. position: absolute;
  60. top: 12 rpx;
  61. left: -40rpx;
  62. transform-origin: 0;
  63. transform: translateX(-50%);
  64. @include vue-flex;
  65. align-items: center;
  66. justify-content: center;
  67. z-index: 1;
  68. font-size: 24 rpx;
  69. }
  70. .u-dot {
  71. height: 16 rpx;
  72. width: 16 rpx;
  73. border-radius: 100 rpx;
  74. background: #ddd;
  75. }
  76. </style>