## 通知 ページの隅にグローバル通知メッセージを表示します。 ### 基本的な使い方 :::demo 要素は `$notify` メソッドを登録し、そのパラメータとしてオブジェクトを受け取ります。最も単純な例では、`title` フィールドと `message` フィールドに通知のタイトルと本文を設定することができます。デフォルトでは、通知は 4500ms 後に自動的に閉じますが、`duration` を設定することでその期間を制御することができます。具体的には、`0`に設定すると自動的に閉じません。`duration` はミリ秒単位の `Number` を受け取ることに注意すること。 ```html ``` ::: ### タイプがある場合 success, warning, info, error の 4 種類を提供しています。 :::demo 要素は 4 つの通知タイプを提供します。`success`, `warning`, `info`, `error` です。これらは `type` フィールドで設定され、他の値は無視される。また、`open3` や `open4` のように `type` フィールドを渡さずに直接呼び出すことができるメソッドも登録した。 ```html ``` ::: ### カスタム位置 通知は好きなコーナーから出現させることができます。 :::demo `position` 属性は、通知がどのコーナーをスライドするかを定義します。`右上`, `左上`, `右下`, `左下`のいずれかです。デフォルトは `右上`です。 ```html ``` ::: ### オフセット付き 通知の画面端からのオフセットをカスタマイズします。 :::demo 通知の画面端からのオフセットをカスタマイズするために `offset` 属性を設定します。同じ瞬間のすべての Notification インスタンスは同じオフセットを持つべきであることに注意してください。 ```html ``` ::: ### HTML 文字列を使用します。 `message` は HTML 文字列をサポートしています。 :::demo `dangerouslyUseHTMLString` を true に設定すると、`message` は HTML 文字列として扱われます。 ```html ``` ::: :::warning `message`プロパティは HTML 文字列をサポートしていますが、任意の HTML を動的にレンダリングすると[XSS 攻撃](https://en.wikipedia.org/wiki/Cross-site_scripting)につながりやすく、非常に危険です。したがって、`dangerouslyUseHTMLString`がオンの場合は、`message`の内容が信頼できるものであることを確認し、**決して**ユーザが提供したコンテンツに`message`を代入しないようにしてください。 ::: ### 閉じるボタンを隠す 閉じるボタンを非表示にすることができます :::demo Set the `showClose` attribute to `false` so the notification cannot be closed by the user. ```html ``` ::: ### グローバルメソッド 要素には、Vue.prototype 用のグローバルメソッド `$notify` が追加されました。これにより、Vue のインスタンスでは、このページで行ったように `Notification` を呼び出すことができるようになります。 ### ローカルインポート ```javascript import { ElNotification } from 'element-plus' ``` この場合は `ElNotification(options)` を呼び出す必要があります。また、`ElNotification.success(options)`のように、異なるタイプのメソッドも登録しています。すべてのインスタンスを手動で閉じるには、`ElNotification.closeAll()` を呼び出すことができます。 ### オプション | Attribute | Description | Type | Accepted Values | Default | | ------------------------ | ------------------------------------------------------------------------------------------------------ | ---------------- | ------------------------------------------- | --------- | | title | タイトル | string | — | — | | message | デスクリプションテキスト | string/Vue.VNode | — | — | | dangerouslyUseHTMLString | `message` を HTML 文字列として扱うかどうか | boolean | — | false | | type | 通知タイプ | string | success/warning/info/error | — | | iconClass | カスタムアイコンのクラスを指定します。これは `type` によってオーバーライドされます。 | string | — | — | | customClass | 通知用カスタムクラス名 | string | — | — | | duration | 閉じる前の期間、0 に設定すると自動的には閉じません。 | number | — | 4500 | | position | カスタムポジション | string | top-right/top-left/bottom-right/bottom-left | top-right | | showClose | 閉じるボタンを表示するかどうか | boolean | — | true | | onClose | 閉じる時のコールバック関数 | function | — | — | | onClick | 通知クリック時のコールバック機能 | function | — | — | | offset | 画面の上端からスクロールします。同時刻の各通知インスタンスは、常に同じスクロールでなければなりません。 | number | — | 0 | ### メソッド `通知`と `this.$notify` は現在の通知インスタンスを返します。インスタンスを手動で閉じるには、そのインスタンスに対して `close` を呼び出すことができます。 | Method | Description | | ---- | ---- | | close | 通知を閉じる |