30e8035abc84ce4ca4b449cce75b980b528dc89f2376ce972c16a757724b4aa1258a714286cae3fe9066419eed544c90066114db11faf75cdd3dec3df0fb6b 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. <template>
  2. <div class="el-empty">
  3. <div class="el-empty__image" :style="imageStyle">
  4. <img v-if="image" :src="image" ondragstart="return false">
  5. <slot v-else name="image">
  6. <img-empty />
  7. </slot>
  8. </div>
  9. <div class="el-empty__description">
  10. <slot v-if="$slots.description" name="description"></slot>
  11. <p v-else>{{ emptyDescription }}</p>
  12. </div>
  13. <div v-if="$slots.default" class="el-empty__bottom">
  14. <slot></slot>
  15. </div>
  16. </div>
  17. </template>
  18. <script>
  19. import ImgEmpty from './img-empty.vue';
  20. import { t } from 'element-ui/src/locale';
  21. export default {
  22. name: 'ElEmpty',
  23. components: {
  24. [ImgEmpty.name]: ImgEmpty
  25. },
  26. props: {
  27. image: {
  28. type: String,
  29. default: ''
  30. },
  31. imageSize: Number,
  32. description: {
  33. type: String,
  34. default: ''
  35. }
  36. },
  37. computed: {
  38. emptyDescription() {
  39. return this.description || t('el.empty.description');
  40. },
  41. imageStyle() {
  42. return {
  43. width: this.imageSize ? `${this.imageSize}px` : ''
  44. };
  45. }
  46. }
  47. };
  48. </script>