feat: confirm support reactively

components/modal/ConfirmDialog.tsx

@@ -3,7 +3,7 @@ import type { ModalFuncProps } from './Modal';
 import Dialog from './Modal';
 import ActionButton from './ActionButton';
 import { getConfirmLocale } from './locale';
-import type { FunctionalComponent } from 'vue';
+import { defineComponent, computed } from 'vue';
 
 interface ConfirmDialogProps extends ModalFuncProps {
   afterClose?: () => void;
@@ -18,7 +18,42 @@ function renderSomeContent(_name, someContent) {
   return someContent;
 }
 
-const ConfirmDialog: FunctionalComponent<ConfirmDialogProps> = props => {
+export default defineComponent<ConfirmDialogProps>({
+  name: 'ConfirmDialog',
+  inheritAttrs: false,
+  props: [
+    'icon',
+    'onCancel',
+    'onOk',
+    'close',
+    'closable',
+    'zIndex',
+    'afterClose',
+    'visible',
+    'keyboard',
+    'centered',
+    'getContainer',
+    'maskStyle',
+    'okButtonProps',
+    'cancelButtonProps',
+    'okType',
+    'prefixCls',
+    'okCancel',
+    'width',
+    'mask',
+    'maskClosable',
+    'okText',
+    'cancelText',
+    'autoFocusButton',
+    'transitionName',
+    'maskTransitionName',
+    'type',
+    'title',
+    'content',
+  ] as any,
+  setup(props, { attrs }) {
+    const runtimeLocale = computed(() => getConfirmLocale());
+    return () => {
       const {
         icon,
         onCancel,
@@ -34,32 +69,34 @@ const ConfirmDialog: FunctionalComponent<ConfirmDialogProps> = props => {
         maskStyle,
         okButtonProps,
         cancelButtonProps,
+        okCancel = true,
+        width = 416,
+        mask = true,
+        maskClosable = false,
+        maskTransitionName = 'fade',
+        transitionName = 'zoom',
+        type,
+        title,
+        content,
         // closable = false,
       } = props;
       const okType = props.okType || 'primary';
       const prefixCls = props.prefixCls || 'ant-modal';
       const contentPrefixCls = `${prefixCls}-confirm`;
-  // 默认为 true，保持向下兼容
+      const style = attrs.style || {};
-  const okCancel = 'okCancel' in props ? props.okCancel : true;
-  const width = props.width || 416;
-  const style = props.style || {};
-  const mask = props.mask === undefined ? true : props.mask;
-  // 默认为 false，保持旧版默认行为
-  const maskClosable = props.maskClosable === undefined ? false : props.maskClosable;
-  const runtimeLocale = getConfirmLocale();
       const okText =
         renderSomeContent('okText', props.okText) ||
-    (okCancel ? runtimeLocale.okText : runtimeLocale.justOkText);
+        (okCancel ? runtimeLocale.value.okText : runtimeLocale.value.justOkText);
-  const cancelText = renderSomeContent('cancelText', props.cancelText) || runtimeLocale.cancelText;
+      const cancelText =
-  const autoFocusButton = props.autoFocusButton === null ? false : props.autoFocusButton || 'ok';
+        renderSomeContent('cancelText', props.cancelText) || runtimeLocale.value.cancelText;
-  const transitionName = props.transitionName || 'zoom';
+      const autoFocusButton =
-  const maskTransitionName = props.maskTransitionName || 'fade';
+        props.autoFocusButton === null ? false : props.autoFocusButton || 'ok';
 
       const classString = classNames(
         contentPrefixCls,
-    `${contentPrefixCls}-${props.type}`,
+        `${contentPrefixCls}-${type}`,
-    `${prefixCls}-${props.type}`,
+        `${prefixCls}-${type}`,
-    props.class,
+        attrs.class,
       );
 
       const cancelButton = okCancel && (
@@ -99,13 +136,11 @@ const ConfirmDialog: FunctionalComponent<ConfirmDialogProps> = props => {
           <div class={`${contentPrefixCls}-body-wrapper`}>
             <div class={`${contentPrefixCls}-body`}>
               {renderSomeContent('icon', icon)}
-          {props.title === undefined ? null : (
+              {title === undefined ? null : (
-            <span class={`${contentPrefixCls}-title`}>
+                <span class={`${contentPrefixCls}-title`}>{renderSomeContent('title', title)}</span>
-              {renderSomeContent('title', props.title)}
-            </span>
               )}
               <div class={`${contentPrefixCls}-content`}>
-            {renderSomeContent('content', props.content)}
+                {renderSomeContent('content', content)}
               </div>
             </div>
             <div class={`${contentPrefixCls}-btns`}>
@@ -123,8 +158,6 @@ const ConfirmDialog: FunctionalComponent<ConfirmDialogProps> = props => {
           </div>
         </Dialog>
       );
-};
+    };
-
+  },
-ConfirmDialog.inheritAttrs = false;
+});
-
-export default ConfirmDialog;

components/modal/Modal.tsx

@@ -1,5 +1,5 @@
 import type { ExtractPropTypes, VNodeTypes, CSSProperties, PropType } from 'vue';
-import { defineComponent, inject } from 'vue';
+import { defineComponent, inject, computed } from 'vue';
 import classNames from '../_util/classNames';
 import Dialog from '../vc-dialog';
 import PropTypes from '../_util/vue-types';
@@ -157,7 +157,9 @@ export default defineComponent({
   }),
   emits: ['update:visible', 'cancel', 'change', 'ok'],
   setup() {
+    const confirmLocale = computed(() => getConfirmLocale());
     return {
+      confirmLocale,
       configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
@@ -210,6 +212,7 @@ export default defineComponent({
       centered,
       getContainer,
       $attrs,
+      confirmLocale,
     } = this;
     const children = getSlot(this);
     const { getPrefixCls, getPopupContainer: getContextPopupContainer } = this.configProvider;
@@ -218,7 +221,7 @@ export default defineComponent({
     const defaultFooter = (
       <LocaleReceiver
         componentName="Modal"
-        defaultLocale={getConfirmLocale()}
+        defaultLocale={confirmLocale}
         children={this.renderFooter}
       />
     );

components/modal/locale.ts

@@ -1,3 +1,4 @@
+import { ref } from 'vue';
 import defaultLocale from '../locale/default';
 
 export interface ModalLocale {
@@ -6,23 +7,23 @@ export interface ModalLocale {
   justOkText: string;
 }
 
-let runtimeLocale = {
+const runtimeLocale = ref({
   ...defaultLocale.Modal,
-};
+});
 
 export function changeConfirmLocale(newLocale?: ModalLocale) {
   if (newLocale) {
-    runtimeLocale = {
+    runtimeLocale.value = {
       ...runtimeLocale,
       ...newLocale,
     };
   } else {
-    runtimeLocale = {
+    runtimeLocale.value = {
       ...defaultLocale.Modal,
     };
   }
 }
 
 export function getConfirmLocale() {
-  return runtimeLocale;
+  return runtimeLocale.value;
 }