StandardFormRow.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. <template>
  2. <div :class="[prefixCls, lastCls, blockCls, gridCls]">
  3. <div v-if="title" class="antd-pro-components-standard-form-row-index-label">
  4. <span>{{ title }}</span>
  5. </div>
  6. <div class="antd-pro-components-standard-form-row-index-content">
  7. <slot></slot>
  8. </div>
  9. </div>
  10. </template>
  11. <script>
  12. const classes = [
  13. 'antd-pro-components-standard-form-row-index-standardFormRowBlock',
  14. 'antd-pro-components-standard-form-row-index-standardFormRowGrid',
  15. 'antd-pro-components-standard-form-row-index-standardFormRowLast'
  16. ]
  17. export default {
  18. name: 'StandardFormRow',
  19. props: {
  20. prefixCls: {
  21. type: String,
  22. default: 'antd-pro-components-standard-form-row-index-standardFormRow'
  23. },
  24. title: {
  25. type: String,
  26. default: undefined
  27. },
  28. last: {
  29. type: Boolean
  30. },
  31. block: {
  32. type: Boolean
  33. },
  34. grid: {
  35. type: Boolean
  36. }
  37. },
  38. computed: {
  39. lastCls () {
  40. return this.last ? classes[2] : null
  41. },
  42. blockCls () {
  43. return this.block ? classes[0] : null
  44. },
  45. gridCls () {
  46. return this.grid ? classes[1] : null
  47. }
  48. }
  49. }
  50. </script>
  51. <style lang="less" scoped>
  52. @import '../index.less';
  53. .antd-pro-components-standard-form-row-index-standardFormRow {
  54. display: flex;
  55. margin-bottom: 16px;
  56. padding-bottom: 16px;
  57. border-bottom: 1px dashed @border-color-split;
  58. /deep/ .ant-form-item {
  59. margin-right: 24px;
  60. }
  61. /deep/ .ant-form-item-label label {
  62. margin-right: 0;
  63. color: @text-color;
  64. }
  65. /deep/ .ant-form-item-label,
  66. .ant-form-item-control {
  67. padding: 0;
  68. line-height: 32px;
  69. }
  70. .antd-pro-components-standard-form-row-index-label {
  71. flex: 0 0 auto;
  72. margin-right: 24px;
  73. color: @heading-color;
  74. font-size: @font-size-base;
  75. text-align: right;
  76. & > span {
  77. display: inline-block;
  78. height: 32px;
  79. line-height: 32px;
  80. &::after {
  81. content: ':';
  82. }
  83. }
  84. }
  85. .antd-pro-components-standard-form-row-index-content {
  86. flex: 1 1 0;
  87. /deep/ .ant-form-item:last-child {
  88. margin-right: 0;
  89. }
  90. }
  91. &.antd-pro-components-standard-form-row-index-standardFormRowLast {
  92. margin-bottom: 0;
  93. padding-bottom: 0;
  94. border: none;
  95. }
  96. &.antd-pro-components-standard-form-row-index-standardFormRowBlock {
  97. /deep/ .ant-form-item,
  98. div.ant-form-item-control-wrapper {
  99. display: block;
  100. }
  101. }
  102. &.antd-pro-components-standard-form-row-index-standardFormRowGrid {
  103. /deep/ .ant-form-item,
  104. div.ant-form-item-control-wrapper {
  105. display: block;
  106. }
  107. /deep/ .ant-form-item-label {
  108. float: left;
  109. }
  110. }
  111. }
  112. </style>