Result.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. <template>
  2. <div class="result">
  3. <div>
  4. <a-icon :class="{ 'icon': true, [`${type}`]: true }" :type="localIsSuccess ? 'check-circle' : 'close-circle'"/>
  5. </div>
  6. <div class="title">
  7. <slot name="title">
  8. {{ title }}
  9. </slot>
  10. </div>
  11. <div class="description">
  12. <slot name="description">
  13. {{ description }}
  14. </slot>
  15. </div>
  16. <div class="extra" v-if="$slots.default">
  17. <slot></slot>
  18. </div>
  19. <div class="action" v-if="$slots.action">
  20. <slot name="action"></slot>
  21. </div>
  22. </div>
  23. </template>
  24. <script>
  25. const resultEnum = ['success', 'error']
  26. export default {
  27. name: 'Result',
  28. props: {
  29. /** @Deprecated */
  30. isSuccess: {
  31. type: Boolean,
  32. default: false
  33. },
  34. type: {
  35. type: String,
  36. default: resultEnum[0],
  37. validator (val) {
  38. return (val) => resultEnum.includes(val)
  39. }
  40. },
  41. title: {
  42. type: String,
  43. default: ''
  44. },
  45. description: {
  46. type: String,
  47. default: ''
  48. }
  49. },
  50. computed: {
  51. localIsSuccess: function () {
  52. return this.type === resultEnum[0]
  53. }
  54. }
  55. }
  56. </script>
  57. <style lang="less" scoped>
  58. .result {
  59. text-align: center;
  60. width: 72%;
  61. margin: 0 auto;
  62. padding: 24px 0 8px;
  63. .icon {
  64. font-size: 72px;
  65. line-height: 72px;
  66. margin-bottom: 24px;
  67. }
  68. .success {
  69. color: #52c41a;
  70. }
  71. .error {
  72. color: red;
  73. }
  74. .title {
  75. font-size: 24px;
  76. color: rgba(0, 0, 0);
  77. font-weight: 500;
  78. line-height: 32px;
  79. margin-bottom: 16px;
  80. }
  81. .description {
  82. font-size: 14px;
  83. line-height: 22px;
  84. color: rgba(0, 0, 0, 0.45);
  85. margin-bottom: 24px;
  86. }
  87. .extra {
  88. background: #fafafa;
  89. padding: 24px 40px;
  90. border-radius: 2px;
  91. text-align: left;
  92. }
  93. .action {
  94. margin-top: 32px;
  95. }
  96. }
  97. .mobile {
  98. .result {
  99. width: 100%;
  100. margin: 0 auto;
  101. padding: unset;
  102. }
  103. }
  104. </style>