Container.vue 780 B

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. <template>
  2. <main class="alertContainer">
  3. <LayoutAlertContent
  4. class="alertContent"
  5. v-for="(alert, key) in alerts"
  6. :key="key"
  7. :alert="alert"
  8. />
  9. </main>
  10. </template>
  11. <script lang="ts">
  12. import {defineComponent, computed} from "@vue/composition-api";
  13. import {useContext} from "@nuxtjs/composition-api";
  14. export default defineComponent({
  15. setup() {
  16. const {store} = useContext()
  17. const alerts = computed(() => {
  18. return store.state.page.alerts
  19. })
  20. return {
  21. alerts
  22. }
  23. }
  24. })
  25. </script>
  26. <style scoped>
  27. .alertContainer {
  28. position: fixed;
  29. bottom: 0;
  30. right: 20px;
  31. z-index: 1000;
  32. }
  33. .alertContainer > .alertContent {
  34. position: relative;
  35. margin-bottom: 10px;
  36. }
  37. </style>