BackgroundImage.vue 878 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <template >
  2. <div :style="imgUrl">
  3. <v-sheet v-if="!loaded" class="text-center">
  4. <v-progress-circular
  5. indeterminate
  6. color="primary"
  7. ></v-progress-circular>
  8. </v-sheet>
  9. </div>
  10. </template>
  11. <script>
  12. import { mapGetters } from "vuex";
  13. export default {
  14. data() {
  15. return {
  16. loaded: false
  17. }
  18. },
  19. props: {
  20. news: {
  21. type: Object,
  22. required: true
  23. }
  24. },
  25. computed: {
  26. ...mapGetters({
  27. indexNewsList: "modules/news/indexNewsList",
  28. }),
  29. imgUrl() {
  30. return 'background-image: url(' + (this.news.image ? this.news.image.url : '') + ')';
  31. }
  32. },
  33. mounted() {
  34. this.loaded = true
  35. }
  36. };
  37. </script>
  38. <style>
  39. .text-center {
  40. position: absolute;
  41. height: 100%;
  42. width: 100%;
  43. align-items: center;
  44. display: flex;
  45. justify-content: center;
  46. z-index: 10;
  47. }
  48. </style>