Arco Design Vue 中Modal组件函数调用的多语言支持问题解析

问题背景

在使用Arco Design Vue的Modal组件时，开发者发现通过函数式调用（如Modal.info）创建的模态框，其默认确认和取消按钮文本不受a-config-provider组件的控制，导致无法实现多语言切换功能。而通过组件方式声明的Modal则可以正常支持多语言。

问题现象

当开发者使用Modal.info等函数式API创建模态框时，按钮文本默认为"确定"和"取消"，即使通过a-config-provider配置了全局语言设置，这些默认文本也不会跟随语言切换而变化。相比之下，通过组件方式创建的模态框则可以正确响应语言配置。

技术分析

这个问题的根本原因在于函数式调用和组件式调用在实现机制上的差异：

1. 组件式Modal：直接继承应用上下文，能够感知到a-config-provider提供的全局配置
2. 函数式Modal：在独立上下文中创建，默认情况下不会继承应用的配置上下文

解决方案

要解决这个问题，开发者可以通过以下两种方式：

方案一：显式传递文本属性

在调用函数式Modal时，手动传入okText和cancelText属性：

Modal.info({
  title: 'Info',
  content: 'This is an info message',
  okText: '自定义确定',
  cancelText: '自定义取消'
});

方案二：全局配置默认值

在应用初始化时，设置Modal的默认文本：

import { Modal } from '@arco-design/web-vue';

Modal.config({
  okText: '全局确定',
  cancelText: '全局取消'
});

最佳实践建议

1. 对于需要多语言支持的项目，建议统一使用组件式Modal声明方式
2. 如果必须使用函数式调用，可以在语言切换时动态更新Modal的全局配置
3. 考虑封装一个统一的Modal工具函数，内部处理多语言文本的转换

总结

Arco Design Vue的Modal组件提供了灵活的使用方式，但不同调用方式在多语言支持上存在差异。理解这些差异并根据项目需求选择合适的实现方式，可以更好地构建国际化应用。对于复杂的多语言场景，建议采用组件式声明或封装统一的工具函数来确保一致性。