f206ca0485ab647577b50fe4b023230f93fd93781c3e8b2c05aeea35c01c7e47eff8d9d90050d394d8a3cec16915ca2ce9bda05119cffa835c6fac7cce2090 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. <template>
  2. <div class="el-result">
  3. <div class="el-result__icon">
  4. <slot name="icon">
  5. <component :is="iconElement" :class="iconElement" />
  6. </slot>
  7. </div>
  8. <div v-if="title || $slots.title" class="el-result__title">
  9. <slot name="title">
  10. <p>{{ title }}</p>
  11. </slot>
  12. </div>
  13. <div v-if="subTitle || $slots.subTitle" class="el-result__subtitle">
  14. <slot name="subTitle">
  15. <p>{{ subTitle }}</p>
  16. </slot>
  17. </div>
  18. <div v-if="$slots.extra" class="el-result__extra">
  19. <slot name="extra"></slot>
  20. </div>
  21. </div>
  22. </template>
  23. <script>
  24. import IconSuccess from './icon-success.vue';
  25. import IconError from './icon-error.vue';
  26. import IconWarning from './icon-warning.vue';
  27. import IconInfo from './icon-info.vue';
  28. const IconMap = {
  29. success: 'icon-success',
  30. warning: 'icon-warning',
  31. error: 'icon-error',
  32. info: 'icon-info'
  33. };
  34. export default {
  35. name: 'ElResult',
  36. components: {
  37. [IconSuccess.name]: IconSuccess,
  38. [IconError.name]: IconError,
  39. [IconWarning.name]: IconWarning,
  40. [IconInfo.name]: IconInfo
  41. },
  42. props: {
  43. title: {
  44. type: String,
  45. default: ''
  46. },
  47. subTitle: {
  48. type: String,
  49. default: ''
  50. },
  51. icon: {
  52. type: String,
  53. default: 'info'
  54. }
  55. },
  56. computed: {
  57. iconElement() {
  58. const icon = this.icon;
  59. return icon && IconMap[icon] ? IconMap[icon] : 'icon-info';
  60. }
  61. }
  62. };
  63. </script>