Container.vue 841 B

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