app_vue2/components/Layout/Alert/Content.vue

<!-- Message d'alerte -->

<template>
  <v-alert
    v-model="show"
    :type="alert.type"
    class="position"
    border="left"
    width="400"
    dismissible
    transition="fade-transition"
    @mouseover="onMouseOver"
    @mouseout="onMouseOut"
  >
    <ul v-if="alert.messages.length > 1">
       <li v-for="message in alert.messages">
        {{ message }}
      </li>
    </ul>
    <span v-else>{{alert.messages[0]}}</span>
  </v-alert>
</template>

<script lang="ts">
import { defineComponent, ref, Ref, useContext } from '@nuxtjs/composition-api'
import {Alert} from '~/types/interfaces'

export default defineComponent({
  props: {
    alert: {
      type: Object as () => Alert,
      required: true
    }
  },
  setup () {
    const { store } = useContext()
    const show: Ref<boolean> = ref(true)
    let timeout: any = null

    const clearAlert = (time: number = 2000) => {
      timeout = setTimeout(() => {
        show.value = false
        store.dispatch('page/removeSlowlyAlert')
      }, time)
    }

    const onMouseOver = () => {
      clearTimeout(timeout)
    }

    const onMouseOut = () => {
      clearAlert(1000)
    }

    clearAlert()

    return {
      show,
      onMouseOver,
      onMouseOut
    }
  }
})
</script>

<style scoped>
</style>