Notification: add position

examples/docs/zh-CN/notification.md

@@ -49,13 +49,52 @@
       },
 
       open7() {
-        this.$notify.success({
-          title: '成功',
-          message: '这是一条成功的提示消息',
+        this.$notify({
+          title: '自定义位置',
+          message: '右上角弹出的消息'
+        });
+      },
+
+      open8() {
+        this.$notify({
+          title: '自定义位置',
+          message: '右下角弹出的消息',
+          position: 'bottom-right'
+        });
+      },
+
+      open9() {
+        this.$notify({
+          title: '自定义位置',
+          message: '左下角弹出的消息',
+          position: 'bottom-left'
+        });
+      },
+
+      open10() {
+        this.$notify({
+          title: '自定义位置',
+          message: '左上角弹出的消息',
+          position: 'top-left'
+        });
+      },
+
+      open11() {
+        this.$notify({
+          title: '偏移',
+          message: '这是一条带有偏移的提示消息',
           offset: 100
         });
       },
 
+      open12() {
+        this.$notify({
+          title: 'HTML 片段',
+          dangerouslyUseHTMLString: true,
+          message: '<strong>这是 <i>HTML</i> 片段</strong>'
+        });
+      },
+
       onClose() {
         console.log('Notification 已关闭');
       }
@@ -65,7 +104,7 @@
 
 ## Notification 通知
 
-悬浮出现在页面右上角，显示全局的通知提醒消息。
+悬浮出现在页面角落，显示全局的通知提醒消息。
 
 ### 基本用法
 
@@ -178,17 +217,32 @@
 ```
 :::
 
-### 带有偏移
+### 自定义弹出位置
 
-让 Notification 偏移一些位置
+可以让 Notification 从屏幕四角中的任意一角弹出
 
-::: demo Notification 提供设置偏移量的功能，通过设置 `offset` 字段，可以使弹出的消息距屏幕顶部偏移一段距离。注意在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量。
+::: demo 使用`position`属性定义 Notification 的弹出位置，支持四个选项：`top-right`、`top-left`、`bottom-right`、`bottom-left`，默认为`top-right`。
 ```html
 <template>
   <el-button
     plain
     @click="open7">
-    偏移的消息
+    右上角
+  </el-button>
+  <el-button
+    plain
+    @click="open8">
+    右下角
+  </el-button>
+  <el-button
+    plain
+    @click="open9">
+    左下角
+  </el-button>
+  <el-button
+    plain
+    @click="open10">
+    左上角
   </el-button>
 </template>
 
@@ -196,9 +250,62 @@
   export default {
     methods: {
       open7() {
-        this.$notify.success({
-          title: '成功',
-          message: '这是一条成功的提示消息',
+        this.$notify({
+          title: '自定义位置',
+          message: '右上角弹出的消息'
+        });
+      },
+
+      open8() {
+        this.$notify({
+          title: '自定义位置',
+          message: '右下角弹出的消息',
+          position: 'bottom-right'
+        });
+      },
+
+      open9() {
+        this.$notify({
+          title: '自定义位置',
+          message: '左下角弹出的消息',
+          position: 'bottom-left'
+        });
+      },
+
+      open10() {
+        this.$notify({
+          title: '自定义位置',
+          message: '左上角弹出的消息',
+          position: 'top-left'
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 带有偏移
+
+让 Notification 偏移一些位置
+
+::: demo Notification 提供设置偏移量的功能，通过设置 `offset` 字段，可以使弹出的消息距屏幕边缘偏移一段距离。注意在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量。
+```html
+<template>
+  <el-button
+    plain
+    @click="open11">
+    偏移的消息
+  </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open11() {
+        this.$notify({
+          title: '偏移',
+          message: '这是一条带有偏移的提示消息',
           offset: 100
         });
       }
@@ -208,6 +315,39 @@
 ```
 :::
 
+### 使用 HTML 片段
+`message` 属性支持传入 HTML 片段
+
+::: demo 将`dangerouslyUseHTMLString`属性设置为 true，`message` 就会被当作 HTML 片段处理。
+```html
+<template>
+  <el-button
+    plain
+    @click="open12">
+    使用 HTML 片段
+  </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open12() {
+        this.$notify({
+          title: 'HTML 片段',
+          dangerouslyUseHTMLString: true,
+          message: '<strong>这是 <i>HTML</i> 片段</strong>'
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+:::warning
+`message` 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。因此在 `dangerouslyUseHTMLString` 打开的情况下，请确保 `message` 的内容是可信的，**永远不要**将用户提交的内容赋值给 `message` 属性。
+:::
+
 ### 全局方法
 
 Element 为 `Vue.prototype` 添加了全局方法 `$notify`。因此在 vue instance 中可以采用本页面中的方式调用 Notification。
@@ -227,6 +367,7 @@ import { Notification } from 'element-ui';
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | title | 标题 | string | — | — |
 | message | 说明文字 | string/Vue.VNode | — | — |
+| dangerouslyUseHTMLString | 是否将 message 属性作为 HTML 片段处理 | boolean | — | false |
 | type | 主题样式，如果不在可选值内将被忽略 | string | success/warning/info/error | — |
 | iconClass | 自定义图标的类名。若设置了 `type`，则 `iconClass` 会被覆盖 | string | — | — |
 | customClass | 自定义类名 | string | — | — |