refactor(components): [dropdown,dropdown-item,dropdown-menu] use useNamespace (#5719)

packages/components/dropdown/src/dropdown-item-impl.vue

@@ -1,17 +1,14 @@
 <template>
   <div
     v-if="divided"
-    class="el-dropdown-menu__item--divided"
+    :class="ns.bem('menu', 'item', 'divided')"
     v-bind="$attrs"
   ></div>
   <div
     :ref="itemRef"
     v-bind="{ ...dataset, ...$attrs }"
     :aria-disabled="disabled"
-    :class="{
-      'el-dropdown-menu__item': true,
-      'is-disabled': disabled,
-    }"
+    :class="[ns.be('menu', 'item'), ns.is('disabled', disabled)]"
     :tabindex="tabIndex"
     role="menuitem"
     @click="(e) => $emit('click', e)"
@@ -36,6 +33,7 @@ import { COLLECTION_ITEM_SIGN } from '@element-plus/components/collection'
 import { ElIcon } from '@element-plus/components/icon'
 import { EVENT_CODE } from '@element-plus/utils/aria'
 import { composeEventHandlers, composeRefs } from '@element-plus/utils/dom'
+import { useNamespace } from '@element-plus/hooks'
 import {
   DROPDOWN_COLLECTION_ITEM_INJECTION_KEY,
   dropdownItemProps,
@@ -49,6 +47,8 @@ export default defineComponent({
   props: dropdownItemProps,
   emits: ['pointermove', 'pointerleave', 'click'],
   setup(_, { emit }) {
+    const ns = useNamespace('dropdown')
+
     const { collectionItemRef: dropdownCollectionItemRef } = inject(
       DROPDOWN_COLLECTION_ITEM_INJECTION_KEY,
       undefined
@@ -84,6 +84,7 @@ export default defineComponent({
     }, handleItemKeydown)
 
     return {
+      ns,
       itemRef,
       dataset: {
         [COLLECTION_ITEM_SIGN]: '',

packages/components/dropdown/src/dropdown-menu.vue

@@ -23,6 +23,7 @@ import {
   focusFirst,
 } from '@element-plus/components/roving-focus-group'
 import { composeRefs, composeEventHandlers } from '@element-plus/utils/dom'
+import { useNamespace } from '@element-plus/hooks'
 import { DROPDOWN_INJECTION_KEY } from './tokens'
 import {
   DROPDOWN_COLLECTION_INJECTION_KEY,
@@ -36,6 +37,7 @@ export default defineComponent({
   name: 'ElDropdownMenu',
   props: dropdownMenuProps,
   setup(props) {
+    const ns = useNamespace('dropdown')
     const { _elDropdownSize } = useDropdown()
     const size = _elDropdownSize.value
 
@@ -66,10 +68,7 @@ export default defineComponent({
     )!
 
     const dropdownKls = computed(() => {
-      return [
-        'el-dropdown-menu',
-        size.value && `el-dropdown-menu--${size.value}`,
-      ]
+      return [ns.b('menu'), ns.bm('menu', size?.value)]
     })
 
     const dropdownListWrapperRef = composeRefs(

packages/components/dropdown/src/dropdown.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="el-dropdown">
+  <div :class="ns.b()">
     <el-tooltip
       ref="popperRef"
       :effect="effect"
@@ -9,7 +9,7 @@
       :hide-after="hideTimeout"
       :manual-mode="true"
       :placement="placement"
-      :popper-class="`el-dropdown__popper ${popperClass}`"
+      :popper-class="[ns.e('popper'), popperClass]"
       :reference-element="referenceElementRef?.$el"
       :trigger="trigger"
       :show-after="showTimeout"
@@ -18,7 +18,7 @@
       :virtual-triggering="splitButton"
       append-to-body
       pure
-      transition="el-zoom-in-top"
+      :transition="`${ns.namespace.value}zoom-in-top`"
       persistent
       @show="$emit('visible-change', true)"
       @hide="$emit('visible-change', false)"
@@ -28,7 +28,7 @@
           ref="scrollbar"
           :wrap-style="wrapStyle"
           tag="ul"
-          view-class="el-dropdown__list"
+          :view-class="ns.e('list')"
         >
           <el-focus-trap trapped @mount-on-focus="onMountOnFocus">
             <el-roving-focus-group
@@ -65,9 +65,9 @@
           ref="triggeringElementRef"
           :size="dropdownSize"
           :type="type"
-          class="el-dropdown__caret-button"
+          :class="ns.e('caret-button')"
         >
-          <el-icon class="el-dropdown__icon"><arrow-down /></el-icon>
+          <el-icon :class="ns.e('icon')"><arrow-down /></el-icon>
         </el-button>
       </el-button-group>
     </template>
@@ -91,7 +91,7 @@ import ElFocusTrap from '@element-plus/components/focus-trap'
 import ElRovingFocusGroup from '@element-plus/components/roving-focus-group'
 import { addUnit } from '@element-plus/utils-v2'
 import { ArrowDown } from '@element-plus/icons-vue'
-import { useSize } from '@element-plus/hooks'
+import { useNamespace, useSize } from '@element-plus/hooks'
 import { ElCollection as ElDropdownCollection, dropdownProps } from './dropdown'
 import { DROPDOWN_INJECTION_KEY } from './tokens'
 
@@ -116,6 +116,7 @@ export default defineComponent({
   emits: ['visible-change', 'click', 'command'],
   setup(props, { emit }) {
     const _instance = getCurrentInstance()
+    const ns = useNamespace('dropdown')
 
     const triggeringElementRef = ref()
     const referenceElementRef = ref()
@@ -128,9 +129,7 @@ export default defineComponent({
     const wrapStyle = computed<CSSProperties>(() => ({
       maxHeight: addUnit(props.maxHeight),
     }))
-    const dropdownTriggerKls = computed(() => [
-      [dropdownSize.value ? `el-dropdown--${dropdownSize.value}` : ''],
-    ])
+    const dropdownTriggerKls = computed(() => [ns.m(dropdownSize.value)])
 
     function handleClick() {
       handleClose()
@@ -200,6 +199,7 @@ export default defineComponent({
     }
 
     return {
+      ns,
       scrollbar,
       wrapStyle,
       dropdownTriggerKls,

packages/components/dropdown/src/useDropdown.ts

@@ -3,6 +3,7 @@ import { generateId } from '@element-plus/utils-v2'
 import { EVENT_CODE } from '@element-plus/utils/aria'
 import { on, addClass } from '@element-plus/utils/dom'
 
+import { useNamespace } from '@element-plus/hooks'
 import type { Nullable } from '@element-plus/utils/types'
 import type { IElDropdownInstance } from './dropdown'
 
@@ -21,6 +22,7 @@ export const initDropdownDomEvent = (
   triggerElm,
   _instance
 ) => {
+  const ns = useNamespace('dropdown')
   const menuItems = ref<Nullable<HTMLButtonElement[]>>(null)
   const menuItemsArray = ref<Nullable<HTMLElement[]>>(null)
   const dropdownElm = ref<Nullable<HTMLElement>>(null)
@@ -90,7 +92,7 @@ export const initDropdownDomEvent = (
     if (!_instance.props.splitButton) {
       triggerElm.setAttribute('role', 'button')
       triggerElm.setAttribute('tabindex', _instance.props.tabindex)
-      addClass(triggerElm, 'el-dropdown-selfdefine')
+      addClass(triggerElm, ns.b('selfdefine'))
     }
   }