DevExtreme Vue如何自定义OK、Cancel等默认按钮标签文本

TagBox组件未直接暴露修改这两个按钮文本的顶层props，可根据实际需求选择以下两种方式实现自定义，适配本地化或UX优化要求：

方案一：全局本地化配置（适配全项目统一文案场景） #

该方式会覆盖项目内所有DevExtreme组件的OK、Cancel按钮默认文本，适合全站本地化适配，仅需在项目入口文件配置一次即可：

// 项目入口文件（main.js/main.ts）
import { loadMessages, locale } from 'devextreme/localization';

// 注入自定义文案
loadMessages({
  zh: { // 替换为你项目使用的语言标识，英文场景填'en'
    OK: '确定',
    Cancel: '取消'
    // 可在此处扩展其他DevExtreme组件的本地化文案
  }
});

// 激活对应语言配置
locale('zh');

配置生效后，包括TagBox、DataGrid筛选弹窗、Popup组件在内所有带OK/Cancel默认按钮的组件，都会使用你自定义的文本。

方案二：单组件独立配置（仅修改当前TagBox按钮文本） #

如果不希望影响全局组件的默认文案，可通过TagBox的dropDownOptions属性重写下拉面板的按钮配置，单独指定当前组件的按钮文本：

<template>
  <DxTagBox
    :data-source="optionList"
    v-model:value="selectedTags"
    apply-value-mode="useButtons"
    :drop-down-options="customDropDownConfig"
  />
</template>

<script setup>
import { ref } from 'vue';
import { DxTagBox } from 'devextreme-vue/tag-box';

const selectedTags = ref([]);
const optionList = ref([/* 你的选项数据源 */]);
const customDropDownConfig = ref({
  buttons: [
    {
      name: 'cancel',
      text: '取消',
      onClick: (e) => e.component.hide() // 保留默认关闭下拉面板逻辑
    },
    {
      name: 'apply',
      text: '确定',
      type: 'default',
      onClick: (e) => {
        // 保留默认确认选值、关闭面板逻辑
        const tagBoxInstance = e.component.$parent.option('ownerInstance');
        tagBoxInstance.saveValueEditState();
        e.component.hide();
      }
    }
  ]
})
</script>

注意：使用单组件配置时必须保留按钮原有点击逻辑，否则会出现点击按钮无响应的问题。如果需要给按钮增加自定义交互（比如选值后做额外校验），直接在对应onClick回调里补充逻辑即可。

内容的提问来源于stack exchange，提问作者Nicolas