From aa735d1f8efc8b3ba43e72f00e9e83e96d066641 Mon Sep 17 00:00:00 2001 From: zz <2418184580@qq.com> Date: Mon, 29 Aug 2022 12:03:40 +0800 Subject: [PATCH] fix(components): [dialog] bind `$attrs` (#9455) --- .../components/dev/DeprecatedTag.vue | 5 ++ docs/components.d.ts | 1 + docs/en-US/component/dialog.md | 60 ++++++++++--------- packages/components/dialog/src/dialog.vue | 14 +++++ 4 files changed, 53 insertions(+), 27 deletions(-) create mode 100644 docs/.vitepress/vitepress/components/dev/DeprecatedTag.vue diff --git a/docs/.vitepress/vitepress/components/dev/DeprecatedTag.vue b/docs/.vitepress/vitepress/components/dev/DeprecatedTag.vue new file mode 100644 index 0000000000..12381a2bb1 --- /dev/null +++ b/docs/.vitepress/vitepress/components/dev/DeprecatedTag.vue @@ -0,0 +1,5 @@ + diff --git a/docs/components.d.ts b/docs/components.d.ts index ef28b33d28..bca8cc3960 100644 --- a/docs/components.d.ts +++ b/docs/components.d.ts @@ -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'] diff --git a/docs/en-US/component/dialog.md b/docs/en-US/component/dialog.md index b0fd80a96b..f51e639c75 100644 --- a/docs/en-US/component/dialog.md +++ b/docs/en-US/component/dialog.md @@ -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 | 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 , 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 | Works the same as the header slot. Use that instead. | +| footer | content of the Dialog footer | ## Events diff --git a/packages/components/dialog/src/dialog.vue b/packages/components/dialog/src/dialog.vue index adf80d989c..3df83da0b7 100644 --- a/packages/components/dialog/src/dialog.vue +++ b/packages/components/dialog/src/dialog.vue @@ -36,6 +36,7 @@ !!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() const headerRef = ref()