mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-01-30 11:16:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(components): [popper] use useNamespace (#5728)

Browse Source
This commit is contained in:
bqy 2022-02-11 04:01:18 +08:00 committed by GitHub
parent b99fd42e07
commit a995d4487b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/components/popper/src/arrow.vue
View File

@ -1,5 +1,5 @@
<template>
<span ref="arrowRef" class="el-popper__arrow" data-popper-arrow="" />
<span ref="arrowRef" :class="ns.e('arrow')" data-popper-arrow="" />
</template>
<script lang="ts">
@ -12,6 +12,7 @@ import {
watch,
unref,
} from 'vue'
import { useNamespace } from '@element-plus/hooks'
import { usePopperArrowProps } from './popper'
import { POPPER_CONTENT_INJECTION_KEY } from './tokens'
@ -19,6 +20,7 @@ export default defineComponent({
name: 'ElPopperArrow',
props: usePopperArrowProps,
setup(props) {
const ns = useNamespace('popper')
const arrowRef = ref<HTMLSpanElement | null>(null)
const popperContentInjection = inject(
POPPER_CONTENT_INJECTION_KEY,
@ -41,6 +43,7 @@ export default defineComponent({
})
return {
ns,
arrowRef,
}
},

12
packages/components/popper/src/content.vue
View File

@ -23,7 +23,7 @@ import {
watch,
} from 'vue'
import { createPopper } from '@popperjs/core'
import { useZIndex } from '@element-plus/hooks'
import { useZIndex, useNamespace } from '@element-plus/hooks'
import { POPPER_INJECTION_KEY, POPPER_CONTENT_INJECTION_KEY } from './tokens'
import { usePopperContentProps } from './popper'
import { buildPopperOptions, unwrapMeasurableEl } from './utils'
@ -38,6 +38,7 @@ export default defineComponent({
undefined
)!
const { nextZIndex } = useZIndex()
const ns = useNamespace('popper')
const popperContentRef = ref<HTMLElement | null>(null)
const arrowRef = ref<HTMLElement | null>(null)
const arrowOffset = ref<number>()
@ -52,11 +53,9 @@ export default defineComponent({
)
const contentClass = computed(() => [
{
'el-popper': true,
'is-pure': props.pure,
[`is-${props.effect}`]: !!props.effect,
},
ns.b(),
ns.is('pure', props.pure),
ns.is(props.effect),
props.popperClass,
])
@ -126,6 +125,7 @@ export default defineComponent({
})
return {
ns,
popperContentRef,
popperInstanceRef,
contentStyle,