refactor(components): [menu] add deprecated mark to popperAppendToBody (#11509)

This commit is contained in:
qiang 2023-02-12 14:57:21 +08:00 committed by GitHub
parent 196e30715c
commit 5c95932769
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 4 deletions

View File

@ -100,6 +100,7 @@ menu/collapse
| hide-timeout | timeout before hiding a sub-menu | number | — | 300 |
| disabled | whether the sub-menu is disabled | boolean | — | false |
| popper-append-to-body(deprecated) | whether to append the popup menu to body. If the positioning of the menu is wrong, you can try setting this prop | boolean | — | level one SubMenu: true / other SubMenus: false |
| teleported | whether popup menu is teleported to the body | boolean | — | level one SubMenu: true / other SubMenus: false |
| popper-offset | offset of the popper | number | — | 6 |
| expand-close-icon | Icon when menu are expanded and submenu are closed, `expand-close-icon` and `expand-open-icon` need to be passed together to take effect | `string \| Component` | — | — |
| expand-open-icon | Icon when menu are expanded and submenu are opened, `expand-open-icon` and `expand-close-icon` need to be passed together to take effect | `string \| Component` | — | — |

View File

@ -23,7 +23,7 @@ import {
isString,
throwError,
} from '@element-plus/utils'
import { useNamespace } from '@element-plus/hooks'
import { useDeprecated, useNamespace } from '@element-plus/hooks'
import { ArrowDown, ArrowRight } from '@element-plus/icons-vue'
import { ElIcon } from '@element-plus/components/icon'
import useMenu from './use-menu'
@ -52,6 +52,10 @@ export const subMenuProps = buildProps({
type: Boolean,
default: undefined,
},
teleported: {
type: Boolean,
default: undefined,
},
popperOffset: {
type: Number,
default: 6,
@ -77,6 +81,17 @@ export default defineComponent({
props: subMenuProps,
setup(props, { slots, expose }) {
useDeprecated(
{
from: 'popper-append-to-body',
replacement: 'teleported',
scope: COMPONENT_NAME,
version: '2.3.0',
ref: 'https://element-plus.org/en-US/component/menu.html#submenu-attributes',
},
computed(() => props.popperAppendToBody !== undefined)
)
const instance = getCurrentInstance()!
const { indexPath, parentMenu } = useMenu(
instance,
@ -124,9 +139,8 @@ export default defineComponent({
return subMenu.level === 0
})
const appendToBody = computed(() => {
return props.popperAppendToBody === undefined
? isFirstLevel.value
: Boolean(props.popperAppendToBody)
const value = props.teleported ?? props.popperAppendToBody
return value === undefined ? isFirstLevel.value : value
})
const menuTransitionName = computed(() =>
rootMenu.props.collapse