vuetifyjs/vuetify

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

Open

#20,409 opened on 2024年9月1日

GitHub で見る
 (2 comments) (5 reactions) (0 assignees)TypeScript (7,139 forks)batch import
T: enhancementT: featuregood first issue

Repository metrics

Stars
 (40,995 stars)
PR merge metrics
 (平均マージ 59d 10h) (30d で 8 merged PRs)

説明

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."/>

コントリビューターガイド

調査方針
実装では、VAlert コンポーネントに `duration` プロパティを追加する必要があります。既存のプロパティとパターンを確認するために、VAlert のソースファイル（おそらく packages/vuetify/src/components/VAlert/VAlert.ts）を参照してください。自動閉じる動作は setTimeout を使用し、期間が経過した後に close のようなイベントを発行する必要があります。コンポーネントのアンマウント時やプロパティの変更時にタイマーをクリアすることを確認してください。対応する spec ファイルに単体テストを記述してください。
技術スタック
vuetypescript
領域
frontend
Issue 種別
機能
難度新しい貢献者にとっての実装難度です。1 は非常に小さな変更、5 は専門的な作業です。
1
推定時間経験ある貢献者が調査、実装、テスト、pull request 準備にかけるおおよその時間範囲です。
1時間未満
活動状況Issue が今どれだけ取り組みやすいかを示します。新しい、活発、古い、ブロック中、またはメンテナー入力待ちなどです。
アクティブ
明確さ期待される変更、受け入れ条件、次の手順がどれだけ明確かを示します。
明確
前提条件
VueTypeScriptGit
初心者向け度初回貢献者にどれだけ取り組みやすいかを 1-100 で推定したスコアです。
75