element-plus [i18n] [message-box] ElConfigProvider的属性有locale,但是el-message-box还是用的英文

yruzcnhs  于 5个月前  发布在  其他
关注(0)|答案(9)|浏览(51)

Bug Type: i18n

Environment

  • Vue Version: 3.2.47
  • Element Plus Version: 2.3.3
  • Browser / OS: chrome 110 win64
  • Build Tool: Vite

Reproduction

  • el-message-box

不知道怎么复现,sorry🥹🥹🥹,想关issue也没关系啦~
无法在playground复现,因为需要在mount app之前操作:#12418 (comment)

Steps to reproduce

element-plus退回到2.2是正常的,最近才出的问题

ElConfigProvider 的属性有值,但是el-message-box还是用的英文。我检查了一下,好像 use-global-config.ts 这个文件中globalConfig是个空对象( {} )。我想调试看看为什么,但是我的项目 use-global-config.ts 这个文件sourcemap又是乱的,其他项目我又复现不了。

What is Expected?

config: locale zh-cn

What is actually happening?

config: {}

Additional comments

bqucvtff

bqucvtff1#

在我设备上试了一下,是正常的,链接。

xhv8bpkk

xhv8bpkk2#

在我设备上试了一下,是正常的,链接。

对啊,我也尝试做了最小复现,但做不出来,我也不知道往什么方向排查了

laawzig2

laawzig23#

是不是自定义了按钮文本,像这样

vcudknz3

vcudknz34#

没有自定义文本,之前的版本都是好的,应该最近才有问题的,项目里所有MessageBox的两个按钮都错了。
然后其他有国际化的组件就没问题,只是MessageBox有问题

xiozqbni

xiozqbni5#

这就奇怪了,没法复现,就不好排查。
如果你们项目里 MessageBox 有做统一封装的话,可以先通过自定义按钮文本解决。

sirbozc5

sirbozc56#

这就奇怪了,没法复现,就不好排查。 如果你们项目里 MessageBox 有做统一封装的话,可以先通过自定义按钮文本解决

嗯嗯,谢谢你,但是没有统一封装,如果是我,应该会优先锁定之前的版本暂时解决。
还有大佬,你知道如果项目里element-plus的sourcemap是乱的,有什么方法解决吗,或者有什么思路吗,我自己也想debug,但是没有sourcemap真的debug不了

uubf1zoe

uubf1zoe7#

确实,我这边sourcemap好像不对。

iszxjhcz

iszxjhcz8#

复现步骤,使用element-plus项目的play:

其实就是在挂载app前调用一下MessageBox Loading这种组件
main.ts

import { createApp } from 'vue'
import { ElLoading } from '@element-plus/components'
import '@element-plus/theme-chalk/src/dark/css-vars.scss'
;(async () => {
  /** loading before app mount */
  const timeoutPromise = new Promise((resolve) => { setTimeout(resolve, 600) })
  const loading = ElLoading.service({ fullscreen: true })
  await timeoutPromise
  loading.close()

  const apps = import.meta.glob('./src/*.vue')
  const name = location.pathname.replace(/^\//, '') || 'App'
  const file = apps[`./src/${name}.vue`]
  if (!file) {
    location.pathname = 'App'
    return
  }
  const App = (await file()).default
  const app = createApp(App)

  app.mount('#play')
})()

App.vue

<template>
  <el-config-provider :locale="zhCn">
    <el-button text @click="open">Click to open the Message Box</el-button>
  </el-config-provider>
</template>

<script lang="ts" setup>
import { ElConfigProvider, ElMessageBox } from '@element-plus/components'
import zhCn from '@element-plus/locale/lang/zh-cn'
import '@element-plus/theme-chalk/src/message-box.scss'

const open = () => {
ElMessageBox.confirm(
'proxy will permanently delete the file. Continue?',
'Warning',
{
type: 'warning',
}
)
}
</script>
mcdcgff0

mcdcgff09#

又想在app mount前loading,又不想指定按钮文字,于是,我在main.ts前加了点比较hack的玩意🥹

import { provideGlobalConfig } from 'element-plus/es';
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import { render } from 'vue';

// FIXME hack element-plus config(for we use ElLoading(Message, MessageBox) before app mounted)
const virtualDiv = document.createElement('div');
const virtualComponent = defineComponent({
  setup() {
    provideGlobalConfig({
      locale: zhCn,
    });
  },
  render() {
    return h('div');
  },
});
render(h(virtualComponent), virtualDiv);

相关问题