4. 语言切换

elementplus在使用的时候是默认是英文，效果如下：

企业微信截图_7184ea7c-baf9-4f7d-afc1-138bbc4175e8.png

但是我们在开发的时候公司往往要求我们的网站是中文的，这时候就需要将英文转成中文了。这里elementplus给我们提供了一个全局组件Config Provider。

4.1 Config Provider

Config Provider是用来提供全局的配置选项，让你的配置能够在全局都能够被访问到。它可以用来配置多语言，配置按钮属性，配置消息等等。主要有以下属性：

属性名	说明	类型	默认值
locale	翻译文本对象	object	en
size	全局组件大小	small, medium, large	default
zIndex	全局初始化zIndex 的值	number	—
namespace	全局组件类名称前缀 (需要配合 $namespace 使用)	string	el
button	按钮相关的配置详细配置	object	autoInsertSpace(自动在两个中文字符之间插入空格): false
message	消息相关配置	object	max(可同时显示的消息最大数量): -
experimental-features	将要添加的实验阶段的功能，所有功能都是默认设置为 false	object	—

企业微信截图_7184ea7c-baf9-4f7d-afc1-138bbc4175e8.png 这里我们主要使用到的是locale属性来配置语言。

4.2 实现语言切换

实现语言切换主要分为两种情况：将某些组件的语言设置成中文，或者是将所有组件的语言都设置成中文。这里我们以全局配置为例，以下所有配置都是在App.vue中完成的。

4.2.1 使用Config Provider组件

使用Config Provider组件包裹router-view，然后配置locale语言属性，这样所有的组件在加载的时候都会被配置上这个属性

<el-config-provider :locale="locale">
    <router-view></router-view>
  </el-config-provider>
</div>

4.2.2 引入elementplus的语言包

引入我们需要切换的elementplus的语言包，然后绑定到locale属性上，这样就能实现语言切换了

<script setup>
  // elementplus引入中文包
  import zhCn from 'element-plus/lib/locale/lang/zh-cn';
  import { reactive } from 'vue';

  const { locale } = reactive({
    locale: zhCn
  });
</script>

4.2.3 刷新页面即可生效

页面效果如下：

企业微信截图_21f9e5ff-2f90-4b45-b4dd-1de2c92af52e.png

elementplus使用小技巧之语言切换