Notification: add showClose option (#6402)

* Adding showClose option on Notification

* Update notification.md

examples/docs/en-US/notification.md

@@ -94,6 +94,14 @@
           message: '<strong>This is <i>HTML</i> string</strong>'
         });
       },
+      
+      open13() {
+        this.$notify.success({
+          title: 'Info',
+          message: 'This is a message without close button',
+          showClose: false
+        });
+      },
 
       onClose() {
         console.log('Notification is closed');
@@ -343,6 +351,36 @@ Customize Notification's offset from the edge of the screen.
 ```
 :::
 
+### Hide Close button
+
+It is possible to hide the close button
+
+::: demo Set the `showClose` attribute to `false` so the notification cannot be closed by the user.
+```html
+<template>
+  <el-button
+    plain
+    @click="open13">
+    Hide close button
+    </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open13() {
+        this.$notify.success({
+          title: 'Info',
+          message: 'This is a message without close button',
+          showClose: false
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
 :::warning
 Although `message` property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). So when `dangerouslyUseHTMLString` is on, please make sure the content of `message` is trusted, and **never** assign `message` to user-provided content.
 :::
@@ -371,6 +409,7 @@ In this case you should call `Notification(options)`. We have also registered me
 | iconClass | custom icon's class. It will be overridden by `type` | string | — | — |
 | customClass | custom class name for Notification | string | — | — |
 | duration | duration before close. It will not automatically close if set 0 | number | — | 4500 |
+| showClose | whether to show a close button | boolean | — | true |
 | onClose | callback function when closed | function | — | — |
 | onClick | callback function when notification clicked | function | — | — |
 | offset | offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset | number | — | 0 |

packages/notification/src/main.vue

@@ -20,7 +20,10 @@
             <p v-else v-html="message"></p>
           </slot>
         </div>
-        <div class="el-notification__closeBtn el-icon-close" @click.stop="close"></div>
+        <div
+          class="el-notification__closeBtn el-icon-close"
+          v-if="showClose"
+          @click.stop="close"></div>
       </div>
     </div>
   </transition>
@@ -42,6 +45,7 @@
         message: '',
         duration: 4500,
         type: '',
+        showClose: true,
         customClass: '',
         iconClass: '',
         onClose: null,

test/unit/specs/notification.spec.js

@@ -107,4 +107,15 @@ describe('Notification', () => {
       }, 700);
     }, 500);
   });
+
+  it('no close button', done => {
+    Notification({
+      message: 'Hello',
+      showClose: false
+    });
+    setTimeout(() => {
+      expect(document.querySelector('.el-notification__closeBtn')).to.not.exist;
+      done();
+    }, 500);
+  });
 });