test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-13 17:05:47 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(popover): fix z-index won't update when popover is shown (#1364)

Browse Source 
* fix(popover): fix z-index won't update when popover is shown

* fix: update

* fix: remove onmounted

* fix: update
This commit is contained in:
kooriookami 2021-01-27 09:19:10 -06:00 committed by GitHub
parent 91b8e5d47b
commit a841a9727a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
packages/popover/src/usePopover.ts
View File

@ -1,12 +1,12 @@
import { computed, watch } from 'vue'
import type { SetupContext } from 'vue'
import { computed, ref, watch } from 'vue'
import { isString } from '@element-plus/utils/util'
import type { IPopperOptions } from '@element-plus/popper'
import { usePopper } from '@element-plus/popper'
import PopupManager from '@element-plus/utils/popup-manager'
import { EmitType } from '@element-plus/popper/src/use-popper'
import type { IPopperOptions } from '@element-plus/popper'
import type { SetupContext } from 'vue'
export interface IUsePopover extends IPopperOptions{
export interface IUsePopover extends IPopperOptions {
width: number | string
}
@ -14,25 +14,27 @@ export const SHOW_EVENT = 'show'
export const HIDE_EVENT = 'hide'
export default function usePopover(props: IUsePopover, ctx: SetupContext<string[]>) {
const popperStyle = computed(() => {
let _width: string
const zIndex = ref(PopupManager.nextZIndex())
const width = computed(() => {
if (isString(props.width)) {
_width = props.width as string
} else {
_width = props.width + 'px'
return props.width as string
}
return props.width + 'px'
})
const popperStyle = computed(() => {
return {
width: _width,
zIndex: PopupManager.nextZIndex(),
width: width.value,
zIndex: zIndex.value,
}
})
const popperProps = usePopper(props, ctx)
const popperProps = usePopper(props, ctx as SetupContext<EmitType[]>)
watch(popperProps.visibility, val => {
if (val) {
zIndex.value = PopupManager.nextZIndex()
}
ctx.emit(val ? SHOW_EVENT : HIDE_EVENT)
})

4
packages/popper/src/use-popper/index.ts
View File

@ -21,8 +21,8 @@ import type {
RefElement,
} from './defaults'
type ElementType = ComponentPublicInstance | HTMLElement
type EmitType = 'update:visible' | 'after-enter' | 'after-leave' | 'before-enter' | 'before-leave'
export type ElementType = ComponentPublicInstance | HTMLElement
export type EmitType = 'update:visible' | 'after-enter' | 'after-leave' | 'before-enter' | 'before-leave'
export const DEFAULT_TRIGGER = ['hover']
export const UPDATE_VISIBLE_EVENT = 'update:visible'