| 12345678910111213141516171819202122232425262728293031323334353637383940414243 |
- <template>
- <main class="alertContainer">
- <LayoutAlertContent
- v-for="(alert, key) in alerts"
- :key="key"
- class="alertContent"
- :alert="alert"
- />
- </main>
- </template>
- <script lang="ts">
- import { defineComponent, computed, ComputedRef } from '@vue/composition-api'
- import { useContext } from '@nuxtjs/composition-api'
- import { alert } from '~/types/interfaces'
- export default defineComponent({
- setup () {
- const { store } = useContext()
- const alerts:ComputedRef<Array<alert>> = computed(() => {
- return store.state.page.alerts
- })
- return {
- alerts
- }
- }
- })
- </script>
- <style scoped>
- .alertContainer {
- position: fixed;
- bottom: 0;
- right: 20px;
- z-index: 1000;
- }
- .alertContainer > .alertContent {
- position: relative;
- margin-bottom: 10px;
- }
- </style>
|