mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-02 03:08:21 +08:00
fix(components): [dialog] bind $attrs (#9455)
This commit is contained in:
zz
GitHub
parent
1884b1d7c8
commit
aa735d1f8e
@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<el-tag size="small" type="warning" effect="plain" hit round
|
||||
>deprecated</el-tag
|
||||
>
|
||||
</template>
|
||||
1
docs/components.d.ts
vendored
1
docs/components.d.ts
vendored
@ -13,6 +13,7 @@ declare module '@vue/runtime-core' {
|
||||
Contributors: typeof import('./.vitepress/vitepress/components/globals/contributors.vue')['default']
|
||||
ControllabilitySvg: typeof import('./.vitepress/vitepress/components/globals/design/controllability-svg.vue')['default']
|
||||
Dark: typeof import('./.vitepress/vitepress/components/icons/dark.vue')['default']
|
||||
DeprecatedTag: typeof import('./.vitepress/vitepress/components/dev/DeprecatedTag.vue')['default']
|
||||
DesignGuide: typeof import('./.vitepress/vitepress/components/globals/design-guide.vue')['default']
|
||||
EfficiencySvg: typeof import('./.vitepress/vitepress/components/globals/design/efficiency-svg.vue')['default']
|
||||
ElementPlusLogo: typeof import('./.vitepress/vitepress/components/icons/element-plus-logo.vue')['default']
|
||||
|
||||
@ -105,36 +105,42 @@ When using `modal` = false, please make sure that `append-to-body` was set to **
|
||||
|
||||
## Attributes
|
||||
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
| --------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------ | --------------- | ------- |
|
||||
| model-value / v-model | visibility of Dialog | boolean | — | — |
|
||||
| title | title of Dialog. Can also be passed with a named slot (see the following table) | string | — | — |
|
||||
| width | width of Dialog | string / number | — | 50% |
|
||||
| fullscreen | whether the Dialog takes up full screen | boolean | — | false |
|
||||
| top | value for `margin-top` of Dialog CSS | string | — | 15vh |
|
||||
| modal | whether a mask is displayed | boolean | — | true |
|
||||
| append-to-body | whether to append Dialog itself to body. A nested Dialog should have this attribute set to `true` | boolean | — | false |
|
||||
| lock-scroll | whether scroll of body is disabled while Dialog is displayed | boolean | — | true |
|
||||
| custom-class | custom class names for Dialog | string | — | — |
|
||||
| open-delay | Time(milliseconds) before open | number | — | 0 |
|
||||
| close-delay | Time(milliseconds) before close | number | — | 0 |
|
||||
| close-on-click-modal | whether the Dialog can be closed by clicking the mask | boolean | — | true |
|
||||
| close-on-press-escape | whether the Dialog can be closed by pressing ESC | boolean | — | true |
|
||||
| show-close | whether to show a close button | boolean | — | true |
|
||||
| before-close | callback before Dialog closes, and it will prevent Dialog from closing | function(done)，done is used to close the Dialog | — | — |
|
||||
| draggable | enable dragging feature for Dialog | boolean | — | false |
|
||||
| center | whether to align the header and footer in center | boolean | — | false |
|
||||
| align-center | whether to align the dialog both horizontally and vertically | boolean | — | false |
|
||||
| destroy-on-close | Destroy elements in Dialog when closed | boolean | — | false |
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
| ------------------------------ | ------------------------------------------------------------------------------------------------- | ------------------------------------------------ | --------------- | ------- |
|
||||
| model-value / v-model | visibility of Dialog | boolean | — | — |
|
||||
| title | title of Dialog. Can also be passed with a named slot (see the following table) | string | — | — |
|
||||
| width | width of Dialog | string / number | — | 50% |
|
||||
| fullscreen | whether the Dialog takes up full screen | boolean | — | false |
|
||||
| top | value for `margin-top` of Dialog CSS | string | — | 15vh |
|
||||
| modal | whether a mask is displayed | boolean | — | true |
|
||||
| append-to-body | whether to append Dialog itself to body. A nested Dialog should have this attribute set to `true` | boolean | — | false |
|
||||
| lock-scroll | whether scroll of body is disabled while Dialog is displayed | boolean | — | true |
|
||||
| custom-class <DeprecatedTag /> | custom class names for Dialog | string | — | — |
|
||||
| open-delay | Time(milliseconds) before open | number | — | 0 |
|
||||
| close-delay | Time(milliseconds) before close | number | — | 0 |
|
||||
| close-on-click-modal | whether the Dialog can be closed by clicking the mask | boolean | — | true |
|
||||
| close-on-press-escape | whether the Dialog can be closed by pressing ESC | boolean | — | true |
|
||||
| show-close | whether to show a close button | boolean | — | true |
|
||||
| before-close | callback before Dialog closes, and it will prevent Dialog from closing | function(done)，done is used to close the Dialog | — | — |
|
||||
| draggable | enable dragging feature for Dialog | boolean | — | false |
|
||||
| center | whether to align the header and footer in center | boolean | — | false |
|
||||
| align-center | whether to align the dialog both horizontally and vertically | boolean | — | false |
|
||||
| destroy-on-close | Destroy elements in Dialog when closed | boolean | — | false |
|
||||
|
||||
:::warning
|
||||
|
||||
`custom-class` has been **deprecated**, and **will be** removed in <VersionTag version="2.3.0" />, please use `class`.
|
||||
|
||||
:::
|
||||
|
||||
## Slots
|
||||
|
||||
| Name | Description |
|
||||
| ----------------- | ----------------------------------------------------------------------------------------------------- |
|
||||
| — | content of Dialog |
|
||||
| header | content of the Dialog header; Replacing this removes the title, but does not remove the close button. |
|
||||
| title(deprecated) | Works the same as the header slot. Use that instead. |
|
||||
| footer | content of the Dialog footer |
|
||||
| Name | Description |
|
||||
| ----------------------- | ----------------------------------------------------------------------------------------------------- |
|
||||
| — | content of Dialog |
|
||||
| header | content of the Dialog header; Replacing this removes the title, but does not remove the close button. |
|
||||
| title <DeprecatedTag /> | Works the same as the header slot. Use that instead. |
|
||||
| footer | content of the Dialog footer |
|
||||
|
||||
## Events
|
||||
|
||||
|
||||
@ -36,6 +36,7 @@
|
||||
<el-dialog-content
|
||||
v-if="rendered"
|
||||
ref="dialogContentRef"
|
||||
v-bind="$attrs"
|
||||
:custom-class="customClass"
|
||||
:center="center"
|
||||
:align-center="alignCenter"
|
||||
@ -80,6 +81,7 @@ import { useDialog } from './use-dialog'
|
||||
|
||||
defineOptions({
|
||||
name: 'ElDialog',
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
const props = defineProps(dialogProps)
|
||||
@ -97,6 +99,18 @@ useDeprecated(
|
||||
computed(() => !!slots.title)
|
||||
)
|
||||
|
||||
useDeprecated(
|
||||
{
|
||||
scope: 'el-dialog',
|
||||
from: 'custom-class',
|
||||
replacement: 'class',
|
||||
version: '2.3.0',
|
||||
ref: 'https://element-plus.org/en-US/component/dialog.html#attributes',
|
||||
type: 'Attribute',
|
||||
},
|
||||
computed(() => !!props.customClass)
|
||||
)
|
||||
|
||||
const ns = useNamespace('dialog')
|
||||
const dialogRef = ref<HTMLElement>()
|
||||
const headerRef = ref<HTMLElement>()
|
||||
|
||||
Loading…
Reference in New Issue
Block a user