refactor(components): [notification] use useNamespace (#5722)

packages/components/notification/src/notification.vue

@@ -1,31 +1,27 @@
 <template>
   <transition
-    name="el-notification-fade"
+    :name="ns.b('fade')"
     @before-leave="onClose"
     @after-leave="$emit('destroy')"
   >
     <div
       v-show="visible"
       :id="id"
-      :class="['el-notification', customClass, horizontalClass]"
+      :class="[ns.b(), customClass, horizontalClass]"
       :style="positionStyle"
       role="alert"
       @mouseenter="clearTimer"
       @mouseleave="startTimer"
       @click="onClick"
     >
-      <el-icon
-        v-if="iconComponent"
-        class="el-notification__icon"
-        :class="typeClass"
-      >
+      <el-icon v-if="iconComponent" :class="[ns.e('icon'), typeClass]">
         <component :is="iconComponent" />
       </el-icon>
-      <div class="el-notification__group">
-        <h2 class="el-notification__title" v-text="title"></h2>
+      <div :class="ns.e('group')">
+        <h2 :class="ns.e('title')" v-text="title"></h2>
         <div
           v-show="message"
-          class="el-notification__content"
+          :class="ns.e('content')"
           :style="!!title ? undefined : { margin: 0 }"
         >
           <slot>
@@ -35,11 +31,7 @@
             <p v-else v-html="message"></p>
           </slot>
         </div>
-        <el-icon
-          v-if="showClose"
-          class="el-notification__closeBtn"
-          @click.stop="close"
-        >
+        <el-icon v-if="showClose" :class="ns.e('closeBtn')" @click.stop="close">
           <close />
         </el-icon>
       </div>
@@ -52,6 +44,7 @@ import { useEventListener, useTimeoutFn } from '@vueuse/core'
 import { EVENT_CODE } from '@element-plus/utils/aria'
 import { ElIcon } from '@element-plus/components/icon'
 import { TypeComponents, TypeComponentsMap } from '@element-plus/utils/icon'
+import { useNamespace } from '@element-plus/hooks'
 import { notificationProps, notificationEmits } from './notification'
 
 import type { CSSProperties } from 'vue'
@@ -68,14 +61,13 @@ export default defineComponent({
   emits: notificationEmits,
 
   setup(props) {
+    const ns = useNamespace('notification')
     const visible = ref(false)
     let timer: (() => void) | undefined = undefined
 
     const typeClass = computed(() => {
       const type = props.type
-      return type && TypeComponentsMap[props.type]
-        ? `el-notification--${type}`
-        : ''
+      return type && TypeComponentsMap[props.type] ? ns.m(type) : ''
     })
 
     const iconComponent = computed(() => {
@@ -135,6 +127,7 @@ export default defineComponent({
     useEventListener(document, 'keydown', onKeydown)
 
     return {
+      ns,
       horizontalClass,
       typeClass,
       iconComponent,