vuetifyjs/vuetify

[Feature Request] Add duration Prop to Automatically Dismiss v-alert

Open

#20.409 geöffnet am 1. Sept. 2024

Auf GitHub ansehen
 (1 Kommentar) (5 Reaktionen) (0 zugewiesene Personen)TypeScript (40.995 Stars) (7.139 Forks)batch import
T: enhancementT: featuregood first issue

Beschreibung

Problem to solve

Currently, v-alert components remain visible until manually dismissed, requiring developers to implement a setTimeout() to hide the alert after a certain period. This can lead to repetitive code.

Proposed solution

Introduce a duration prop to the v-alert component. This prop accepts a number representing the duration (in milliseconds) for which the alert should remain visible before automatically closing usage example :

<v-alert :duration="5000" text=" This alert will automatically close after 5 seconds."/>

Contributor Guide

Tech Stack
typescriptvue
Domain
frontend
Issue Type
feature
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
2
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
1-3 hours
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
fresh
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
clear
Voraussetzungen
Basic Vue component knowledgeFamiliarity with Vuetify v alert
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
85
Research-Richtung
The implementation should add a `duration` prop to the VAlert component. Look at the VAlert source file (likely packages/vuetify/src/components/VAlert/VAlert.ts) for existing props and patterns. The auto dismiss behavior should use setTimeout and emit a close like event after the duration expires. Ensure the timer is cleared on component unmount or prop changes. Write unit tests in the corresponding spec file.