Vue前端使用I18实现中英文切换

一、配置vue-i18

1. 进入src/locales/index.js

1. import { createI18n } from 'vue-i18n'
2. import zhCN from 'ant-design-vue/es/locale/zh_CN'
3. import enGB from 'ant-design-vue/es/locale/en_GB'
4. import zh_cn from './lang/zh-cn.js'
5. import en from './lang/en.js'
7. import tool from '@/utils/tool'
8. import sysConfig from '@/config/index'
10. export const messages = {
11. 'zh-cn': {
12. lang: zhCN,
13. ...zh_cn
14. },
15. en: {
16. lang: enGB,
17. ...en
18. }
19. }
21. const i18n = createI18n({
22. locale: tool.data.get('APP_LANG') || sysConfig.LANG,
23. fallbackLocale: 'zh-cn',
24. globalInjection: true,
25. messages
26. })
28. export default i18n

2. 查看 src/utils/tool.js文件

1. import { notification } from 'ant-design-vue';
3. const tool = {}
5. // 以下使用中英翻译用到该方法！！！
6. // localStorage
7. tool.data = {
8. set(table, settings) {
9. const _set = JSON.stringify(settings)
10. return localStorage.setItem(table, _set)
11. },
12. get(table) {
13. let data = localStorage.getItem(table)
14. try {
15. data = JSON.parse(data)
16. } catch (err) {
17. return null
18. }
19. return data
20. },
21. remove(table) {
22. return localStorage.removeItem(table)
23. },
25. clear() {
26. return localStorage.clear()
27. }
28. }
30. // sessionStorage
31. tool.session = {
32. set(table, settings) {
33. const _set = JSON.stringify(settings)
34. return sessionStorage.setItem(table, _set)
35. },
36. get(table) {
37. let data = sessionStorage.getItem(table)
38. try {
39. data = JSON.parse(data)
40. } catch (err) {
41. return null
42. }
43. return data
44. },
45. remove(table) {
46. return sessionStorage.removeItem(table)
47. },
48. clear() {
49. return sessionStorage.clear()
50. }
51. }
53. // 千分符
54. tool.groupSeparator = (num) => {
55. num = `${num}`
56. if (!num.includes('.')) num += '.'
58. return num
59. .replace(/(\d)(?=(\d{3})+\.)/g, ($0, $1) => {
60. return `${$1},`
61. })
62. .replace(/\.$/, '')
63. }
65. // 获取所有字典数组
66. tool.dictDataAll = () => {
67. return tool.data.get('DICT_TYPE_TREE_DATA')
68. }
70. // 字典翻译方法，界面插槽使用方法 {{ $TOOL.dictType('sex', record.sex) }}
71. tool.dictTypeData = (dictValue, value) => {
72. const dictTypeTree = tool.dictDataAll()
73. if (!dictTypeTree) {
74. return '需重新登录'
75. }
76. const tree = dictTypeTree.find((item) => item.dictValue === dictValue)
77. if (!tree) {
78. return '无此字典'
79. }
80. const children = tree.children
81. const dict = children.find((item) => item.dictValue === value)
82. return dict?.name || '无此字典'
83. }
85. // 获取某个code下字典的列表，多用于字典下拉框
86. tool.dictTypeList = (dictValue) => {
87. const dictTypeTree = tool.dictDataAll()
88. if (!dictTypeTree) {
89. return []
90. }
91. const tree = dictTypeTree.find((item) => item.dictValue === dictValue)
92. if (tree && tree.children) {
93. return tree.children
94. }
95. return []
96. }
98. // 获取某个code下字典的列表，基于dictTypeList 改进，保留老的，逐步替换
99. tool.dictList = (dictValue) => {
100. const dictTypeTree = tool.dictDataAll()
101. if (!dictTypeTree) {
102. return []
103. }
104. const tree = dictTypeTree.find((item) => item.dictValue === dictValue)
105. if (tree) {
106. return tree.children.map((item) => {
107. return {
108. value: item['dictValue'],
109. label: item['name']
110. }
111. })
112. }
113. return []
114. }
116. // 生成UUID
117. tool.snowyUuid = () => {
118. let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
119. let r = (Math.random() * 16) | 0,
120. v = c === 'x' ? r : (r & 0x3) | 0x8
121. return v.toString(16)
122. })
123. // 首字符转换成字母
124. return 'xn' + uuid.slice(2)
125. }
127. tool.sortBy = (property) => {
128. return function (value1, value2) {
129. let a = value1[property]
130. let b = value2[property]
132. return a < b ? 1 : a > b ? -1 : 0
133. }
134. }
136. tool.sortBy = (property, asc) => {
137. //默认升序,不能写在闭包里面，写在闭包里面是无效的……asc没反应就
138. if (asc === undefined) {
139. asc = -1
140. } else {
141. asc = asc ? -1 : 1
142. }
143. return function (value1, value2) {
144. let a = value1[property]
145. let b = value2[property]
146. return a < b ? asc : a > b ? asc * -1 : 0
147. }
148. }
149. /**
150. * 打开消息面板
151. * @param type 类型，success，info，warning，error
152. * @param message 标题
153. * @param description 备注
154. * @param duration 弹出时间，默认3s
155. */
156. export const showNotification = (type, message, description = '', duration = 3) => {
157. notification[type]({
158. message,
159. description,
160. duration
161. })
162. }
164. // 文件处理工具end
165. export default tool

3. 查看 src/locales/lang/zh-cn.js、src/locales/lang/en.js

1. import 'dayjs/locale/zh-cn'
3. export default {
4. common: {
5. searchButton: '查询',
6. resetButton: '重置',
7. addButton: '增加',
8. editButton: '编辑',
9. removeButton: '删除',
10. batchRemoveButton: '批量删除',
11. detailButton: '详情',
12. searchKey: '关键词',
13. imports: '导入',
14. more: '更多',
15. export: '导出',
16. },
17. model: {
18. user: '用户',
19. org: '机构',
20. pos: '职位',
21. role: '角色',
22. bizUser: '人员'
23. },
24. login: {
25. signInTitle: '用户登录',
26. forgetPassword: '忘记密码',
27. signIn: '登录',
28. signInOther: '其他登录方式',
29. accountPlaceholder: '请输入账号',
30. accountError: '请输入账号',
31. PWPlaceholder: '请输入密码',
32. PWError: '请输入密码',
33. validLaceholder: '请输入验证码',
34. validError: '请输入验证码',
35. accountPassword: '账号密码',
36. phoneSms: '手机号登录',
37. phonePlaceholder: '请输入手机号',
38. smsCodePlaceholder: '请输入短信验证码',
39. getSmsCode: '获取验证码',
40. machineValidation: '机器验证',
41. sendingSmsMessage: '短信发送中',
42. newPwdPlaceholder: '请输入新密码',
43. backLogin: '返回登录',
44. restPassword: '重置密码',
45. emailPlaceholder: '请输入邮箱号',
46. emailCodePlaceholder: '请输入邮件验证码',
47. restPhoneType: '手机号找回',
48. restEmailType: '邮箱找回',
49. sysName: '管理'
50. },
51. user: {
52. userStatus: '用户状态',
53. resetPassword: '重置密码',
54. role: '角色',
55. batchExportButton: '批量导出',
56. grantRole: '授权角色',
57. grantResource: '授权资源',
58. grantPermission: '授权权限',
59. exportUserInfo: '导出信息',
60. placeholderNameAndSearchKey: '请输入姓名或关键词',
61. placeholderUserStatus: '请选择状态',
62. popconfirmDeleteUser: '确定要删除吗？',
63. popconfirmResatUserPwd: '确定要重置吗？'
64. }
65. }

1. export default {
2. common: {
3. searchButton: 'search',
4. resetButton: 'reset',
5. addButton: 'add',
6. editButton: 'edit',
7. removeButton: 'delete',
8. batchRemoveButton: 'batch Remove',
9. detailButton: 'detail',
10. searchKey: 'Search Key',
11. imports: 'Import',
12. more: 'More',
13. export: 'Export',
14. },
15. model: {
16. user: 'user',
17. org: 'org',
18. pos: 'pos',
19. role: 'role',
20. bizUser: 'bizUser'
21. },
22. login: {
23. signInTitle: 'Sign in',
24. forgetPassword: 'Forget password',
25. signIn: 'Sign in',
26. signInOther: 'Sign in with',
27. accountPlaceholder: 'Please input a user account',
28. accountError: 'Please input a user account',
29. PWPlaceholder: 'Please input a password',
30. PWError: 'Please input a password',
31. validLaceholder: 'Please input a valid',
32. validError: 'Please input a valid',
33. accountPassword: 'Account Password',
34. phoneSms: 'Phone SMS',
35. phonePlaceholder: 'Please input a phone',
36. smsCodePlaceholder: 'Please input a SMS code',
37. getSmsCode: 'SMS code',
38. machineValidation: 'Machine Validation',
39. sendingSmsMessage: 'Sending SMS Message',
40. newPwdPlaceholder: 'Please input a new password',
41. backLogin: 'Back Login',
42. restPassword: 'Rest Password',
43. emailPlaceholder: 'Please input a email',
44. emailCodePlaceholder: 'Please input a Email code',
45. restPhoneType: 'For phone rest',
46. restEmailType: 'For email rest',
47. sysName: 'management'
48. },
49. user: {
50. userStatus: 'User Status',
51. resetPassword: 'Reset Password',
52. role: 'Role',
53. batchExportButton: 'Batch Export',
54. grantRole: 'Grant Role',
55. grantResource: 'Grant Resource',
56. grantPermission: 'Grant Permission',
57. exportUserInfo: 'Export UserInfo',
58. placeholderNameAndSearchKey: 'Please enter your name or keyword',
59. placeholderUserStatus: 'Please select status',
60. popconfirmDeleteUser: 'Are you sure you want to delete it？',
61. popconfirmResatUserPwd: 'Are you sure you want to reset？'
62. }
63. }

二、配置页面

进入需要有翻译功能的页面进行配置，如 login.vue

1. HTML内容

1. <template>
2. <div class="login_background">
3. <div class="login_main">
6. <div class="login_config">
7. <a-dropdown>
8. <global-outlined />
9. <template #overlay>
10. <a-menu>
11. <a-menu-item
12. v-for="item in lang"
13. :key="item.value"
14. :command="item"
15. :class="{ selected: config.lang === item.value }"
16. @click="configLang(item.value)"
17. >
18. {{ item.name }}
19. a-menu-item>
20. a-menu>
21. template>
22. a-dropdown>
23. div>
26. <div class="login-form">
27. <a-card>
28. <div class="login-header">
29. <div class="logo">
31. <img :alt="sysBaseConfig.SNOWY_SYS_NAME" :src="sysBaseConfig.SNOWY_SYS_LOGO" />
35. <label>{{ $t('login.sysName') }}label>
36. div>
37. div>
39. <a-tabs v-model:activeKey="activeKey">
43. <a-tab-pane key="userAccount" :tab="$t('login.accountPassword')">
44. <a-form ref="loginForm" :model="ruleForm" :rules="rules">
45. <a-form-item name="account">
46. <a-input
47. v-model:value="ruleForm.account"
48. :placeholder="$t('login.accountPlaceholder')"
49. size="large"
50. @keyup.enter="login"
51. >
52. <template #prefix>
53. <UserOutlined class="login-icon-gray" />
54. template>
55. a-input>
56. a-form-item>
58. <a-form-item name="password">
59. <a-input-password
60. v-model:value="ruleForm.password"
61. :placeholder="$t('login.PWPlaceholder')"
62. size="large"
63. autocomplete="off"
64. @keyup.enter="login"
65. >
66. <template #prefix>
67. <LockOutlined class="login-icon-gray" />
68. template>
69. a-input-password>
70. a-form-item>
72. <a-form-item name="validCode" v-if="captchaOpen === 'true'">
73. <a-row :gutter="8">
74. <a-col :span="17">
75. <a-input
76. v-model:value="ruleForm.validCode"
77. :placeholder="$t('login.validLaceholder')"
78. size="large"
79. @keyup.enter="login"
80. >
81. <template #prefix>
82. <verified-outlined class="login-icon-gray" />
83. template>
84. a-input>
85. a-col>
86. <a-col :span="7">
87. <img :src="validCodeBase64" class="login-validCode-img" @click="loginCaptcha" />
88. a-col>
89. a-row>
90. a-form-item>
92. <a-form-item>
93. <a href="/findpwd" style="color: #0d84ff">{{ $t('login.forgetPassword') }}？a>
94. a-form-item>
95. <a-form-item>
96. <a-button type="primary" class="w-full" :loading="loading" round size="large" @click="login"
97. >{{ $t('login.signIn') }}
98. a-button>
99. a-form-item>
100. a-form>
101. a-tab-pane>
105. a-tabs>
106. a-card>
107. div>
108. div>
109. div>
110. template>

2. JS内容

4. <style lang="less">
5. @import 'login';
6. style>

三、主要步骤

方法一

① 页面上添加小地球选择语言显示选项

1. <a-dropdown>
2. <global-outlined />
3. <template #overlay>
4. <a-menu>
5. <a-menu-item
6. v-for="item in lang"
7. :key="item.value"
8. :command="item"
9. :class="{ selected: config.lang === item.value }"
10. @click="configLang(item.value)"
11. >
12. {{ item.name }}
13. a-menu-item>
14. a-menu>
15. template>
16. a-dropdown>

② 实现添加的小地球功能

1. export default {
2. data() {
3. return {
4. lang: [],
6. config: {
7. // lang 属性的值是通过 tool.data.get('APP_LANG') || this.$CONFIG.LANG 表达式获取的
8. // 如果 tool.data.get('APP_LANG') 返回一个真值（非空、非undefined、非false等），则使用该值作为 lang 的值；否则，使用 this.$CONFIG.LANG 作为默认值。
9. lang: tool.data.get('APP_LANG') || this.$CONFIG.LANG,
11. }
12. }
13. },
15. watch: { // 当 config.lang 发生变化时，即语言设置发生变化时，触发绑定的回调函数
17. 'config.lang': function (val) {
18. // 将新的语言设置应用到 $i18n 实例中，以改变应用程序的语言
19. this.$i18n.locale = val
20. // 将新的语言设置存储到 tool.data 中，以便在后续访问或导航到新页面时可以获取并应用语言设置
21. tool.data.set('APP_LANG', val)
22. }
23. },
24. methods: {
25. // 更新 config.lang 的值
26. configLang(key) {
27. this.config.lang = key
28. },
29. }
30. }

③ 实现语言的切换选项显示

在上述 return {} 中的 lang: [] 填入数据

1. lang: [
2. {
3. name: '简体中文',
4. value: 'zh-cn'
5. },
6. {
7. name: 'English',
8. value: 'en'
9. }
10. ]

方法二

① 页面上添加小地球选择语言显示选项

1. <a-dropdown v-if="!ismobile" class="panel-item">
2. <global-outlined />
3. <template #overlay>
4. <a-menu :selected-keys="lang">
5. <a-menu-item key="zh-cn" @click="handleIn18('zh-cn')">
6. <span>简体中文span>
7. a-menu-item>
8. <a-menu-item key="en" @click="handleIn18('en')">
9. <span>Englishspan>
10. a-menu-item>
11. a-menu>
12. template>
13. a-dropdown>

② 在methods中添加点击选项后的切换功能

1. data() {
2. return {
3. lang: [],
4. }
5. },
6. methods: {
7. // 设置多语言语种
8. handleIn18(key) {
9. // 将 this.lang 数据初始化为空数组
10. this.lang = []
11. // 将传入的 key 值添加到 this.lang 数组中，用于保存语言数据
12. this.lang.push(key)
13. // 将语言设置应用到 $i18n 实例中，以改变应用程序的语言
14. this.$i18n.locale = key
15. // 将语言设置存储到 this.$TOOL.data 中，使用键名 'APP_LANG' 来标识。这样可以将语言设置持久化，以便在后续访问或导航到新页面时可以获取并应用语言设置
16. this.$TOOL.data.set('APP_LANG', key)
17. },
18. }

四、多页面使用相同语言

在以上方法中都将使得所有的页面用同一种语言，因为：

方法一中

1. 'config.lang': function (val) {
2. // 将新的语言设置应用到 $i18n 实例中，以改变应用程序的语言
3. this.$i18n.locale = val
4. // 将新的语言设置存储到 tool.data 中，以便在后续访问或导航到新页面时可以获取并应用语言设置
5. tool.data.set('APP_LANG', val)
6. }

方法二中

1. // 将语言设置应用到 $i18n 实例中，以改变应用程序的语言
2. this.$i18n.locale = key
3. // 将语言设置存储到 this.$TOOL.data 中，使用键名 'APP_LANG' 来标识。这样可以将语言设置持久化，以便在后续访问或导航到新页面时可以获取并应用语言设置
4. this.$TOOL.data.set('APP_LANG', key)

lang 语言选择列表：

注意：如果想要获取的 lang 语言数据列表一致，而不需要自己重新定义的话，可以在此基础上添加如下代码：

1. created() {
2. // 获取默认语言，根据之前存储的语言设置或默认的语言设置来确定数组的内容
3. // this.$TOOL.data.get('APP_LANG') 从 this.$TOOL.data 中获取键名为 'APP_LANG' 的值，即之前存储的语言设置。如果之前没有存储语言设置，这个表达式的结果将为 undefined
4. // this.$CONFIG.LANG 是一个变量，表示默认的语言设置
5. // this.lang 的初始化通过 new Array() 创建一个新的数组。数组内容是通过三元运算符 || 进行判断
6. // 如果 this.$TOOL.data.get('APP_LANG') 有值，则使用它作为数组的唯一元素；否则，使用 this.$CONFIG.LANG 作为数组的唯一元素。
7. this.lang = new Array(this.$TOOL.data.get('APP_LANG') || this.$CONFIG.LANG)
8. },

五、$t('') 无效

在一般情况下，只要在全局定义了 vue-i18（即配置了vue-i8），那么一般情况下是有用的，不管是哪种使用方式，如下两种示例：

1. <label>{{ $t('login.sysName') }}label>
2. 只是用label举例并不表示只有label有用

1. 以下是 :tab、:placeholder 的举例
2. <a-tab-pane key="userAccount" :tab="$t('login.accountPassword')">
3. <a-form ref="loginForm" :model="ruleForm" :rules="rules">
4. <a-form-item name="account">
5. <a-input
6. v-model:value="ruleForm.account"
7. :placeholder="$t('login.accountPlaceholder')"
8. size="large"
9. @keyup.enter="login"
10. >
11. <template #prefix>
12. <UserOutlined class="login-icon-gray" />
13. template>
14. a-input>
15. a-form-item>
16. <a-form-item name="password">
17. <a-input-password
18. v-model:value="ruleForm.password"
19. :placeholder="$t('login.PWPlaceholder')"
20. size="large"
21. autocomplete="off"
22. @keyup.enter="login"
23. >
24. <template #prefix>
25. <LockOutlined class="login-icon-gray" />
26. template>
27. a-input-password>
28. a-form-item>
29. a-form>

以上都属于正确演示，都是有效的，但是如果使用第二种方式，且直接用tab、:placeholder而没有加冒号 : 则失效，包括其他的比如 :title 等都要加 : 才有效。

原因：冒号“：”其实是v-bind的缩写，冒号后面绑定为变量，会动态变化的值；一般属性后面为常量。由于当前需要切换语言所以是动态的值绑定，需要冒号:或v-bind:才可变。

六、遍历List进行中英文切换

以下假设List集合中的字段为中文，英文的话更简单，就不举例了。

zh-cn.js

1. menu: {
2. '系统首页': '系统首页',
3. '个人中心' : '个人中心',
4. '其他': '其他'
5. }
6. 如果集合中的数据是中文就写中文的字段并使用单引号，如果是英文就不要单引号

en.js

1. menu: {
2. '系统首页': 'System Home',
3. '个人中心' : 'Personal Center',
4. '其他': 'Other'
5. }
6. 如果集合中的数据是中文就写中文的字段并使用单引号，如果是英文就不要单引号

HTML中

2. <a-col :span="6" :key="shortcut.id" v-for="shortcut in shortcutList">
3. <shortcutCard
4. :icon="shortcut.icon ? shortcut.icon : 'menu-outlined'"
6. :label="$t('menu.'+shortcut.title)"
8. @click="leaveFor(shortcut.path)"
9. />
10. a-col>
11. 其中 :label="$t('menu.'+shortcut.title)" 即引入menu中变量shortcut.title的值的数据

显示效果如下（List中没有的数据不会显示，比如像上面说些的'其他'字段）：

所以应用主要是：

1. {{ $t('menu.' + shortcut.title) }}
2. 或者
3. :title="$t('menu.' + shortcut.title)"

七、在HTML、JS中使用$t()

1、HTML中使用$t()

1. {{ $t('menu.title'}}
2. 或者
3. :title="$t('menu.title')"

2、JS中使用$t()

使用 this 引用 $t() 即 this.$t() ，注意JS中的 属性 ：this.$t() 中属性是不需要冒号“:”的！！！

1. handleUser(key) {
2. // 个人中心页面跳转
3. if (key === 'uc') {
4. router.push({ path: '/usercenter' })
5. }
7. // 点击清理缓存
8. if (key === 'clearCache') {
9. this.$confirm({
10. // 提示
11. title: this.$t('login.info'),
12. // 提示内容
13. content: this.$t('login.delCache'),
14. icon: createVNode(ExclamationCircleOutlined),
15. maskClosable: false,
16. // 确认按钮
17. okText: this.$t('button.sure'),
18. // 取消按钮
19. cancelText: this.$t('button.cancel'),
20. onOk() {
21. message.loading('正在清理中...', 1)
22. tool.data.clear()
23. setTimeout(() => {
24. router.replace({ path: '/login' })
25. location.reload()
26. }, 100)
27. },
28. onCancel() {}
29. })
30. }
32. // 退出登录
33. if (key === 'outLogin') {
34. this.$confirm({
35. // 提示
36. title: this.$t('login.info'),
37. // 提示内容
38. content: this.$t('login.logoutMessage'),
39. icon: createVNode(ExclamationCircleOutlined),
40. maskClosable: false,
41. // 确认按钮
42. okText: this.$t('button.sure'),
43. // 取消按钮
44. cancelText: this.$t('button.cancel'),
45. onOk() {
46. // 取得缓存中的token
47. const token = tool.data.get('TOKEN')
48. const param = {
49. token: token
50. }
51. message.loading('退出中...', 1)
52. loginApi
53. .logout(param)
54. .then(() => {
55. // message.c
56. // 清理掉个人的一些信息
57. tool.data.remove('TOKEN')
58. tool.data.remove('USER_INFO')
59. tool.data.remove('MENU')
60. tool.data.remove('PERMISSIONS')
61. router.replace({ path: '/login' })
62. })
63. .catch(() => {
64. tool.data.clear()
65. router.replace({ path: '/login' })
66. location.reload()
67. })
68. },
69. onCancel() {}
70. })
71. }
72. },

以下是调用 handleUser 方法的HTML：

1. <a-menu>
2. <a-menu-item key="uc" @click="handleUser('uc')">
3. <UserOutlined style="margin-right: 8px" />
4. <span>{{ $t('index.userCenter') }}span>
5. a-menu-item>
6. <a-menu-item key="clearCache" @click="handleUser('clearCache')">
7. <loading3-quarters-outlined style="margin-right: 8px" />
8. <span>{{ $t('index.cleanCache') }}span>
9. a-menu-item>
10. <a-menu-divider />
11. <a-menu-item key="outLogin" @click="handleUser('outLogin')">
12. <export-outlined style="margin-right: 8px" />
13. <span>{{ $t('index.logout') }}span>
14. a-menu-item>
15. a-menu>

效果如图：

3、JS里的HTML部分中使用$t()

1. renderAlert() {
2. // 绘制统计列数据
3. // eslint-disable-next-line no-unused-vars
4. const needTotalItems = this.needTotalList.map((item) => {
5. return (
6. <span className="mr-3">
7. {item.title} 总计{' '}
8. <a className="font-6">{!item.customRender ? item.total : item.customRender(item.total)}a>
9. span>
10. )
11. })
13. // 绘制 清空 按钮
14. // eslint-disable-next-line no-unused-vars
15. const clearItem =
16. typeof this.alert === 'boolean' && this.alert
17. ? this.renderClear(this.clearSelected)
18. : typeof this.alert.clear === 'function'
19. ? this.renderClear(this.alert.clear)
20. : null
22. // 绘制 alert 组件
23. if (alert) {
24. const message = (
25. <div>
26. <span className="mr-3">
27. 已选择 : <a className="font-6">{this.selectedRows.length}a>
28. span>
29. {needTotalItems}
30. {clearItem}
31. div>
32. )
33. return <a-alert showIcon class="mb-4" message={message} />
34. }
35. },
37. renderClear(callback) {
38. if (this.selectedRowKeys.length <= 0) return null
39. return (
40. <a
41. className="ml-6"
42. onClick={() => {
43. callback()
44. this.clearSelected()
45. }}>
46. {' '}
47. 清空{' '}
48. a>
49. )
50. },

切换多语言，修改代码：

1. renderClear(callback) {
2. if (this.selectedRowKeys.length <= 0) return null
3. return (
4. <a
5. className="ml-6"
6. onClick={() => {
7. callback()
8. this.clearSelected()
9. }}>
10. {' '}
12. { this.$t('button.clean') }{' '}
13. a>
14. )
15. },
16. renderAlert() {
17. // 绘制统计列数据
18. // eslint-disable-next-line no-unused-vars
19. const needTotalItems = this.needTotalList.map((item) => {
20. return (
21. <span className="mr-3">
22. {item.title} 总计{' '}
23. <a className="font-6">{!item.customRender ? item.total : item.customRender(item.total)}a>
24. span>
25. )
26. })
27. // 绘制 清空 按钮
28. // eslint-disable-next-line no-unused-vars
29. const clearItem =
30. typeof this.alert === 'boolean' && this.alert
31. ? this.renderClear(this.clearSelected)
32. : typeof this.alert.clear === 'function'
33. ? this.renderClear(this.alert.clear)
34. : null
35. // 绘制 alert 组件
36. if (alert) {
37. const message = (
38. <div>
39. <span className="mr-3">
41. { this.$t('table.selected') } : <a className="font-6">{this.selectedRows.length}a>
42. span>
43. {needTotalItems}
44. {clearItem}
45. div>
46. )
47. return <a-alert showIcon class="mb-4" message={message} />
48. }
49. },

4、对antd的表头国际化i18n使用$t()

原始表格HTML：

1. <s-table
2. ref="table"
3. :columns="columns"
4. :data="loadData"
5. :alert="options.alert.show"
6. bordered
7. :row-key="(record) => record.id"
8. :tool-config="toolConfig"
9. :row-selection="options.rowSelection"
10. >
12. <template #operator class="table-operator">
13. <a-space>
14. <a-button type="primary" @click="formRef.onOpen()" v-if="hasPerm('sysSeriesAdd')">
15. <template #icon><plus-outlined />template>
16. {{ $t('button.add') }}
17. a-button>
18. <xn-batch-delete
19. v-if="hasPerm('sysSeriesBatchDelete')"
20. :selectedRowKeys="selectedRowKeys"
21. @batchDelete="deleteBatchSysSeries"
22. />
23. a-space>
24. template>
25. <template #bodyCell="{ column, record }">
26. <template v-if="column.dataIndex === 'picUrl'">
27. <img :src="record.picUrl" alt="图片" style="width: 80px; height: 100px">
28. template>
29. <template v-if="column.dataIndex === 'isOver'">
30. {{ $TOOL.dictTypeData('COMMON_YES_OR_NO', record.isOver) }}
31. template>
32. <template v-if="column.dataIndex === 'online'">
33. {{ $TOOL.dictTypeData('COMMON_YES_OR_NO', record.online) }}
34. template>
35. <template v-if="column.dataIndex === 'action'">
36. <a-space>
37. <a @click="batchBind(record)" v-if="hasPerm('sysSeriesBind')">{{ $t('button.bind') }}a>
38. <a-divider type="vertical" v-if="hasPerm(['sysSeriesBind'], 'and')" />
39. <a @click="formRef.onOpen(record)" v-if="hasPerm('sysSeriesEdit')">{{ $t('common.editButton') }}a>
40. <a-divider type="vertical" v-if="hasPerm(['sysSeriesEdit', 'sysSeriesDelete'], 'and')" />
41. <a-popconfirm :title="$t('user.popconfirmDeleteUser')" @confirm="deleteSysSeries(record)">
42. <a-button type="link" danger size="small" v-if="hasPerm('sysSeriesDelete')">{{ $t('button.delete') }}a-button>
43. a-popconfirm>
44. a-space>
45. template>
46. template>
48. s-table>

对表头以数组形式定义：

1. const columns = [
2. {
3. title: '剧名',
4. dataIndex: 'name'
5. },
6. {
7. title: '总集数',
8. dataIndex: 'totalVideo'
9. },
10. {
11. title: '是否完结',
12. dataIndex: 'isOver'
13. },
14. {
15. title: '封面图',
16. dataIndex: 'picUrl',
17. },
18. {
19. title: '扩展信息',
20. dataIndex: 'extJson',
21. ellipsis: true
22. },
23. {
24. title: '是否上架',
25. dataIndex: 'online'
26. },
27. {
28. title: '创建时间',
29. dataIndex: 'createTime'
30. },
31. {
32. title: '创建用户',
33. dataIndex: 'createrName'
34. }
35. ]

因为JS部分使用的是setup，并不是export default，在其中引用 $t 或者 this.$t 都报错，找不到 $t，所以国际化之后需要引入i18n，不是内部下载的vue-i18n：import { useI18n } from "vue-i18n";，而是自己编写的配置：import i18n from '@/locales';，

如图：再：const { t } = i18n.global;，

代码如下：

切换后刷新如下图：

由于以上方法只能在页面刷新是获取到当前语言，所以需要在切换语言是进行页面刷新：

1. <a-dropdown>
2. <global-outlined />
3. <template #overlay>
4. <a-menu :selected-keys="lang">
5. <a-menu-item key="zh-cn" @click="handleIn18('zh-cn')">
6. <span>简体中文span>
7. a-menu-item>
8. <a-menu-item key="en" @click="handleIn18('en')">
9. <span>Englishspan>
10. a-menu-item>
11. a-menu>
12. template>
13. a-dropdown>

1. // 设置多语言语种
2. handleIn18(key) {
3. this.lang = []
4. this.lang.push(key)
5. this.$i18n.locale = key
6. this.$TOOL.data.set('APP_LANG', key)
8. // 页面刷新
9. window.location.reload()
10. },

之后的使用直接 t('xxx.xxx') 即可：

1. const columns = [
2. {
3. title: t('table.seriesName'),
4. dataIndex: 'name',
5. },
6. {
7. title: t('table.allPlay'),
8. dataIndex: 'totalVideo'
9. },
10. {
11. title: t('table.isOver'),
12. dataIndex: 'isOver'
13. },
14. {
15. title: t('table.image'),
16. dataIndex: 'picUrl',
17. },
18. {
19. title: t('form.expand'),
20. dataIndex: 'extJson',
21. ellipsis: true
22. },
23. {
24. title: t('table.isOn'),
25. dataIndex: 'online'
26. },
27. {
28. title: t('table.createTime'),
29. dataIndex: 'createTime'
30. },
31. {
32. title: t('table.createUser'),
33. dataIndex: 'createrName'
34. }
35. ]

将判断部分也进行修改：

1. <template #bodyCell="{ column, record }">
2. <template v-if="column.dataIndex === 'picUrl'">
3. <img :src="record.picUrl" alt="图片" style="width: 80px; height: 100px">
4. template>
6. <template v-if="column.dataIndex === 'isOver'">
7. <div v-if="record.isOver === 'YES'">{{ $t('table.yes') }}div>
8. <div v-else>{{ $t('table.no') }}div>
9. template>
10. <template v-if="column.dataIndex === 'online'">
11. <div v-if="record.online === 'YES'">{{ $t('table.yes') }}div>
12. <div v-else>{{ $t('table.no') }}div>
13. template>
15. template>

5、关于setup函数中的i18n的使用

即第4点antd中描述的那样：

1. // 引入自己配置的关于i18n的文件夹
2. import i18n from "@/locales";
3. const { t } = i18n.global

之后所有的需要 $t 或者 this.$t 的地方都使用 t 即可。