DescriptionList.vue 2.6 KB

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