refactor(components): [popover] use useNamespace (element-plus#5727)

StetroF · Feb 11, 2022 · 23c7c78 · 23c7c78
1 parent f194efc
commit 23c7c78
Showing 1 changed file with 5 additions and 6 deletions.
diff --git a/packages/components/popover/src/index.vue b/packages/components/popover/src/index.vue
@@ -17,7 +17,7 @@
     </template>
 
     <template #content>
-      <div v-if="title" class="el-popover__title" role="title">
+      <div v-if="title" :class="ns.e('title')" role="title">
         {{ title }}
       </div>
       <slot>
@@ -31,6 +31,7 @@ import { defineComponent, computed, ref, unref } from 'vue'
 import ElTooltip from '@element-plus/components/tooltip'
 import { useDeprecateAppendToBody } from '@element-plus/components/popper'
 import { isString } from '@element-plus/utils'
+import { useNamespace } from '@element-plus/hooks'
 import { usePopoverProps } from './popover'
 
 import type { StyleValue } from 'vue'
@@ -47,6 +48,7 @@ export default defineComponent({
   props: usePopoverProps,
   emits,
   setup(props, { emit }) {
+    const ns = useNamespace('popover')
     const tooltipRef = ref<InstanceType<typeof ElTooltip> | null>(null)
     const popperRef = computed(() => {
       return unref(tooltipRef)?.popperRef
@@ -68,11 +70,7 @@ export default defineComponent({
     })
 
     const kls = computed(() => {
-      return [
-        { 'el-popover--plain': !!props.content },
-        'el-popover',
-        props.popperClass,
-      ]
+      return [ns.b(), props.popperClass, { [ns.m('plain')]: !!props.content }]
     })
 
     const { compatTeleported } = useDeprecateAppendToBody(
@@ -94,6 +92,7 @@ export default defineComponent({
 
     return {
       compatTeleported,
+      ns,
       kls,
       style,
       tooltipRef,