DetailList.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. <template>
  2. <div :class="['detail-list', size, layout === 'vertical' ? 'vertical': 'horizontal']">
  3. <div v-if="title" class="title">{{ title }}</div>
  4. <a-row>
  5. <slot></slot>
  6. </a-row>
  7. </div>
  8. </template>
  9. <script>
  10. import {Col} from 'ant-design-vue/es/grid/'
  11. const Item = {
  12. name: 'DetailListItem',
  13. props: {
  14. term: {
  15. type: String,
  16. default: '',
  17. required: false
  18. },
  19. },
  20. inject: {
  21. col: {
  22. type: Number
  23. }
  24. },
  25. render() {
  26. return (
  27. < Col
  28. {...
  29. {
  30. props: responsive[this.col]
  31. }
  32. }
  33. >
  34. <
  35. div
  36. class
  37. = "term" > {this.$props.term} < /div>
  38. < div
  39. class
  40. = "content" > {this.$slots.default} < /div>
  41. < /Col>
  42. )
  43. }
  44. }
  45. const responsive = {
  46. 1: {xs: 24},
  47. 2: {xs: 24, sm: 12},
  48. 3: {xs: 24, sm: 12, md: 8},
  49. 4: {xs: 24, sm: 12, md: 6}
  50. }
  51. export default {
  52. name: "DetailList",
  53. Item: Item,
  54. components: {
  55. Col
  56. },
  57. props: {
  58. title: {
  59. type: String,
  60. default: '',
  61. required: false
  62. },
  63. col: {
  64. type: Number,
  65. required: false,
  66. default: 3
  67. },
  68. size: {
  69. type: String,
  70. required: false,
  71. default: 'large'
  72. },
  73. layout: {
  74. type: String,
  75. required: false,
  76. default: 'horizontal'
  77. }
  78. },
  79. provide() {
  80. return {
  81. col: this.col > 4 ? 4 : this.col
  82. }
  83. }
  84. }
  85. </script>
  86. <style lang="scss">
  87. .detail-list {
  88. .title {
  89. color: rgba(0, 0, 0, .85);
  90. font-size: 14px;
  91. font-weight: 500;
  92. margin-bottom: 16px;
  93. }
  94. .term {
  95. color: rgba(0, 0, 0, .85);
  96. display: table-cell;
  97. line-height: 20px;
  98. margin-right: 8px;
  99. padding-bottom: 16px;
  100. white-space: nowrap;
  101. &:after {
  102. content: ":";
  103. margin: 0 8px 0 2px;
  104. position: relative;
  105. top: -.5px;
  106. }
  107. }
  108. .content {
  109. color: rgba(0, 0, 0, .65);
  110. display: table-cell;
  111. line-height: 22px;
  112. padding-bottom: 16px;
  113. width: 100%;
  114. }
  115. &.small {
  116. .title {
  117. font-size: 14px;
  118. color: rgba(0, 0, 0, .65);
  119. font-weight: normal;
  120. margin-bottom: 12px;
  121. }
  122. .term, .content {
  123. padding-bottom: 8px;
  124. }
  125. }
  126. &.large {
  127. .term, .content {
  128. padding-bottom: 16px;
  129. }
  130. .title {
  131. font-size: 16px;
  132. }
  133. }
  134. &.vertical {
  135. .term {
  136. padding-bottom: 8px;
  137. }
  138. .term, .content {
  139. display: block;
  140. }
  141. }
  142. }
  143. </style>