refactor(components): [message] use useNamespace (element-plus#5720)

dbarrios1907 · Feb 8, 2022 · cc73848 · cc73848
1 parent 6ec9da0
commit cc73848
Showing 1 changed file with 14 additions and 15 deletions.
diff --git a/packages/components/message/src/message.vue b/packages/components/message/src/message.vue
@@ -1,17 +1,17 @@
 <template>
   <transition
-    name="el-message-fade"
+    :name="ns.b('fade')"
     @before-leave="onClose"
     @after-leave="$emit('destroy')"
   >
     <div
       v-show="visible"
       :id="id"
       :class="[
-        'el-message',
-        type && !icon ? `el-message--${type}` : '',
-        center ? 'is-center' : '',
-        showClose ? 'is-closable' : '',
+        ns.b(),
+        { [ns.m(type)]: type && !icon },
+        ns.is('center', center),
+        ns.is('closable', showClose),
         customClass,
       ]"
       :style="customStyle"
@@ -23,24 +23,20 @@
         v-if="repeatNum > 1"
         :value="repeatNum"
         :type="badgeType"
-        class="el-message__badge"
+        :class="ns.e('badge')"
       >
       </el-badge>
-      <el-icon v-if="iconComponent" class="el-message__icon" :class="typeClass">
+      <el-icon v-if="iconComponent" :class="[ns.e('icon'), typeClass]">
         <component :is="iconComponent" />
       </el-icon>
       <slot>
-        <p v-if="!dangerouslyUseHTMLString" class="el-message__content">
+        <p v-if="!dangerouslyUseHTMLString" :class="ns.e('content')">
           {{ message }}
         </p>
         <!-- Caution here, message could've been compromised, never use user's input as message -->
-        <p v-else class="el-message__content" v-html="message"></p>
+        <p v-else :class="ns.e('content')" v-html="message"></p>
       </slot>
-      <el-icon
-        v-if="showClose"
-        class="el-message__closeBtn"
-        @click.stop="close"
-      >
+      <el-icon v-if="showClose" :class="ns.e('closeBtn')" @click.stop="close">
         <close />
       </el-icon>
     </div>
@@ -54,6 +50,7 @@ import ElBadge from '@element-plus/components/badge'
 import { ElIcon } from '@element-plus/components/icon'
 import { TypeComponents, TypeComponentsMap } from '@element-plus/utils/icon'
 
+import { useNamespace } from '@element-plus/hooks'
 import { messageEmits, messageProps } from './message'
 import type { BadgeProps } from '@element-plus/components/badge'
 
@@ -72,6 +69,7 @@ export default defineComponent({
   emits: messageEmits,
 
   setup(props) {
+    const ns = useNamespace('message')
     const visible = ref(false)
     const badgeType = ref<BadgeProps['type']>(
       props.type ? (props.type === 'error' ? 'danger' : props.type) : 'info'
@@ -80,7 +78,7 @@ export default defineComponent({
 
     const typeClass = computed(() => {
       const type = props.type
-      return type && TypeComponentsMap[type] ? `el-message-icon--${type}` : ''
+      return { [ns.bm('icon', type)]: type && TypeComponentsMap[type] }
     })
 
     const iconComponent = computed(() => {
@@ -135,6 +133,7 @@ export default defineComponent({
     useEventListener(document, 'keydown', keydown)
 
     return {
+      ns,
       typeClass,
       iconComponent,
       customStyle,