как затухать оповещение, используя эффект, используя vuetify и Vue .delete () - PullRequest
Новая
       27

как затухать оповещение, используя эффект, используя vuetify и Vue .delete ()

0 голосов
/ 28 февраля 2020

У меня есть служба сообщений, которая отображает v-alert для определенных вызовов API. Я хочу, чтобы они появлялись, а затем исчезали через 5 секунд.

Используя Vue (читай: не Vuetify) шаблон перехода по списку , я могу получать сообщения для постепенного появления, но я не могу заставить их исчезать - они просто исчезают.

часть шаблона, отображающая сообщения: 

<v-container v-if="show">
  <transition-group name="fade">
    <div v-for="(message, index) in messageList" :key="index">
      <v-alert>
        {{ message.message }}
      </v-alert>
    </div>
  </transition-group>
</v-container>

стили: 

.fade-enter-active, .fade-leave-active
  transition: opacity .5s ease

.fade-enter, .fade-leave-to
  opacity: 0

Сообщения добавляются в список сообщений с помощью Vue .set ( ) и после setTimeout 5 секунд, Vue .delete () 'd. 

// mutations
[SET_MESSAGE](state, payload) {
  Vue.set(state.appMessages, payload.key, payload.message)
},
[DELETE_MESSAGE](state, key) {
  Vue.delete(state.appMessages, key)
}

// actions
[PROCESS_MESSAGE]({ commit }, message) {
  const timestamp = String(new Date().getTime())
  commit(SET_MESSAGE, { key, message })
  setTimeout(() => commit(DELETE_MESSAGE, timestamp), 5000)
}

Show - это просто вычисляемое свойство, которое возвращает true, если в массиве списка сообщений есть какие-либо элементы. 

computed: {
  ...mapGetters({ messageList }),
  show(): boolean {
    if (!Array.isArray(this.messageList)) {
      return false
    }
    return this.messageList.length > 0
  }
}

Есть идеи или лучшие способы go по этому поводу? Я могу заставить его работать с необработанными селекторами css /, но я хочу попробовать сделать это с помощью vue / vuetify.

...