element-plus/website/docs/jp/notification.md

## 通知

ページの隅にグローバル通知メッセージを表示します。

### 基本的な使い方

:::demo 要素は `$notify` メソッドを登録し、そのパラメータとしてオブジェクトを受け取ります。最も単純な例では、`title` フィールドと `message` フィールドに通知のタイトルと本文を設定することができます。デフォルトでは、通知は 4500ms 後に自動的に閉じますが、`duration` を設定することでその期間を制御することができます。具体的には、`0`に設定すると自動的に閉じません。`duration` はミリ秒単位の `Number` を受け取ることに注意すること。

```html
<template>
  <el-button plain @click="open1"> Closes automatically </el-button>
  <el-button plain @click="open2"> Won't close automatically </el-button>
</template>

<script>
  import { h } from 'vue'

  export default {
    methods: {
      open1() {
        this.$notify({
          title: 'Title',
          message: h('i', { style: 'color: teal' }, 'This is a reminder'),
        })
      },

      open2() {
        this.$notify({
          title: 'Prompt',
          message: 'This is a message that does not automatically close',
          duration: 0,
        })
      },
    },
  }
</script>
<!--
<setup>

  import { defineComponent, h } from 'vue';
  import { ElNotification } from 'element-plus';

  export default defineComponent({
    setup() {
      
      const open1 = () => {
        ElNotification({
          title: 'Title',
          message: h('i', { style: 'color: teal' }, 'This is a reminder')
        });
      };

      const open2 = () => {
        ElNotification({
          title: 'Prompt',
          message: 'This is a message that does not automatically close',
          duration: 0
        });
      };
      return {
        open1,
        open2,
      };
    },
  });

</setup>
-->
```

:::

### タイプがある場合

success, warning, info, error の 4 種類を提供しています。

:::demo 要素は 4 つの通知タイプを提供します。`success`, `warning`, `info`, `error` です。これらは `type` フィールドで設定され、他の値は無視される。また、`open3` や `open4` のように `type` フィールドを渡さずに直接呼び出すことができるメソッドも登録した。

```html
<template>
  <el-button plain @click="open1"> Success </el-button>
  <el-button plain @click="open2"> Warning </el-button>
  <el-button plain @click="open3"> Info </el-button>
  <el-button plain @click="open4"> Error </el-button>
</template>

<script>
  export default {
    methods: {
      open1() {
        this.$notify({
          title: 'Success',
          message: 'This is a success message',
          type: 'success',
        })
      },

      open2() {
        this.$notify({
          title: 'Warning',
          message: 'This is a warning message',
          type: 'warning',
        })
      },

      open3() {
        this.$notify.info({
          title: 'Info',
          message: 'This is an info message',
        })
      },

      open4() {
        this.$notify.error({
          title: 'Error',
          message: 'This is an error message',
        })
      },
    },
  }
</script>
<!--
<setup>

  import { defineComponent } from 'vue';
  import { ElNotification } from 'element-plus';

  export default defineComponent({
    setup() {
      
      const open1 = () => {
        ElNotification({
          title: 'Success',
          message: 'This is a success message',
          type: 'success',
        });
      };

      const open2 = () => {
        ElNotification({
          title: 'Warning',
          message: 'This is a warning message',
          type: 'warning',
        });
      };

      const open3 = () => {
        ElNotification({
          title: 'Info',
          message: 'This is an info message',
        });
      };

      const open4 = () => {
        ElNotification({
          title: 'Error',
          message: 'This is an error message',
        });
      };
      return {
        open1,
        open2,
        open3,
        open4,
      };
    },
  });

</setup>
-->
```

:::

### カスタム位置

通知は好きなコーナーから出現させることができます。

:::demo `position` 属性は、通知がどのコーナーをスライドするかを定義します。`右上`, `左上`, `右下`, `左下`のいずれかです。デフォルトは `右上`です。

```html
<template>
  <el-button plain @click="open1"> Top Right </el-button>
  <el-button plain @click="open2"> Bottom Right </el-button>
  <el-button plain @click="open3"> Bottom Left </el-button>
  <el-button plain @click="open4"> Top Left </el-button>
</template>

<script>
  export default {
    methods: {
      open1() {
        this.$notify({
          title: 'Custom Position',
          message: "I'm at the top right corner",
        })
      },

      open2() {
        this.$notify({
          title: 'Custom Position',
          message: "I'm at the bottom right corner",
          position: 'bottom-right',
        })
      },

      open3() {
        this.$notify({
          title: 'Custom Position',
          message: "I'm at the bottom left corner",
          position: 'bottom-left',
        })
      },

      open4() {
        this.$notify({
          title: 'Custom Position',
          message: "I'm at the top left corner",
          position: 'top-left',
        })
      },
    },
  }
</script>
<!--
<setup>

  import { defineComponent } from 'vue';
  import { ElNotification } from 'element-plus';

  export default defineComponent({
    setup() {
      
      const open1 = () => {
        ElNotification({
          title: 'Custom Position',
          message: 'I\'m at the top right corner',
        });
      };

      const open2 = () => {
        ElNotification({
          title: 'Custom Position',
          message: 'I\'m at the bottom right corner',
          position: 'bottom-right',
        });
      };

      const open3 = () => {
        ElNotification({
          title: 'Custom Position',
          message: 'I\'m at the bottom left corner',
          position: 'bottom-left',
        });
      };

      const open4 = () => {
        ElNotification({
          title: 'Custom Position',
          message: 'I\'m at the top left corner',
          position: 'top-left',
        });
      };
      return {
        open1,
        open2,
        open3,
        open4,
      };
    },
  });

</setup>
-->
```

:::

### オフセット付き

通知の画面端からのオフセットをカスタマイズします。

:::demo 通知の画面端からのオフセットをカスタマイズするために `offset` 属性を設定します。同じ瞬間のすべての Notification インスタンスは同じオフセットを持つべきであることに注意してください。

```html
<template>
  <el-button plain @click="open"> Notification with offset </el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$notify.success({
          title: 'Success',
          message: 'This is a success message',
          offset: 100,
        })
      },
    },
  }
</script>
<!--
<setup>

  import { defineComponent } from 'vue';
  import { ElNotification } from 'element-plus';

  export default defineComponent({
    setup() {
      
      const open = () => {
        ElNotification.success({
          title: 'Success',
          message: 'This is a success message',
          offset: 100,
        });
      };

      return {
        open,
      };
    },
  });

</setup>
-->
```

:::

### HTML 文字列を使用します。

`message` は HTML 文字列をサポートしています。

:::demo `dangerouslyUseHTMLString` を true に設定すると、`message` は HTML 文字列として扱われます。

```html
<template>
  <el-button plain @click="open"> Use HTML String </el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$notify({
          title: 'HTML String',
          dangerouslyUseHTMLString: true,
          message: '<strong>This is <i>HTML</i> string</strong>',
        })
      },
    },
  }
</script>
<!--
<setup>

  import { defineComponent } from 'vue';
  import { ElNotification } from 'element-plus';

  export default defineComponent({
    setup() {
      
      const open = () => {
        ElNotification({
          title: 'HTML String',
          dangerouslyUseHTMLString: true,
          message: '<strong>This is <i>HTML</i> string</strong>',
        });
      };

      return {
        open,
      };
    },
  });

</setup>
-->
```

:::

:::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
<template>
  <el-button plain @click="open"> Hide close button </el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$notify.success({
          title: 'Info',
          message: 'This is a message without close button',
          showClose: false,
        })
      },
    },
  }
</script>
<!--
<setup>

  import { defineComponent } from 'vue';
  import { ElNotification } from 'element-plus';

  export default defineComponent({
    setup() {
      
      const open = () => {
        ElNotification.success({
          title: 'Info',
          message: 'This is a message without close button',
          showClose: false,
        });
      };

      return {
        open,
      };
    },
  });

</setup>
-->
```

:::

### グローバルメソッド

要素には、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 | 通知を閉じる |