From 75a84316490ab168309a830009ec605394a4d5ad Mon Sep 17 00:00:00 2001 From: jiangx Date: Tue, 8 Mar 2022 11:01:39 +0800 Subject: [PATCH 1/2] =?UTF-8?q?refactor:=20=E5=88=87=E6=8D=A2=E8=AF=AD?= =?UTF-8?q?=E8=A8=80=E6=8C=87=E4=BB=A4=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/directives/language.ts | 59 ++++++++++++++++++++++---------------- src/store/state.ts | 2 +- 2 files changed, 36 insertions(+), 25 deletions(-) diff --git a/src/directives/language.ts b/src/directives/language.ts index 7bc9714..4f71ffa 100644 --- a/src/directives/language.ts +++ b/src/directives/language.ts @@ -2,35 +2,46 @@ import { watchEffect, DirectiveBinding } from 'vue' import { useStore } from '@/store' import { chineseLanguageLoader } from '@/i18n/util' +interface MyHtmlElement extends HTMLElement { + stopHandler: (() => void) | null +} + /* ep:v-language:title="state.obj" */ -export default (el: HTMLElement, binding: DirectiveBinding) => { - watchEffect(() => { - const store = useStore() - const language = store.language - const { arg, value } = binding - - let content = '' - - if (!Object.keys(value)?.length || !arg) { - return +export default { + mounted(el: MyHtmlElement, binding: DirectiveBinding) { + if (el.stopHandler) { + el.stopHandler() + el.stopHandler = null } + el.stopHandler = watchEffect(() => { + const store = useStore() + const language = store.language + const { arg, value } = binding - if (language === 'zh') { - content = value[arg] - } - - if (language === 'en' && value[arg + 'En']) { - content = value[arg + 'En'] - } else if (language === 'en' && !value[arg + 'En']) { - content = value[arg] - } + if (!Object.keys(value)?.length || !arg) { + return '' + } - if (language === 'tw') { - content = chineseLanguageLoader(value[arg]) - } - el.innerHTML = content - }) + let content = '' + if (language === 'zh') { + content = value[arg] + } + if (language === 'en' && value[arg + 'En']) { + content = value[arg + 'En'] + } else if (language === 'en' && !value[arg + 'En']) { + content = value[arg] + } + if (language === 'tw') { + content = chineseLanguageLoader(value[arg]) + } + el.innerHTML = content + }) + }, + beforeUnmount(el: MyHtmlElement) { + el.stopHandler && el.stopHandler() + el.stopHandler = null + } } diff --git a/src/store/state.ts b/src/store/state.ts index d030a4f..e289c04 100644 --- a/src/store/state.ts +++ b/src/store/state.ts @@ -15,7 +15,7 @@ export interface State { export const state = (): State => ({ shopList: [], selectedModule: '', - language: 'tw', + language: 'zh', config: {}, shop: {}, currentFloor: {}, From 6d248ad1fbf9a57d57e6e08b8a3f86a0f026775d Mon Sep 17 00:00:00 2001 From: jiangx Date: Thu, 10 Mar 2022 13:24:38 +0800 Subject: [PATCH 2/2] =?UTF-8?q?refactor:=20=E4=BF=AE=E6=94=B9=E5=88=87?= =?UTF-8?q?=E6=8D=A2=E8=AF=AD=E8=A8=80=E7=94=B1=E8=87=AA=E5=AE=9A=E4=B9=89?= =?UTF-8?q?=E6=8C=87=E4=BB=A4=E6=94=B9=E4=B8=BA=E5=85=A8=E5=B1=80=E5=87=BD?= =?UTF-8?q?=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/directives/language.ts | 47 ----------------------------------- src/main.ts | 5 ++-- src/plugins/switchLanguage.ts | 26 +++++++++++++++++++ src/typings/switchLanguage.ts | 7 ++++++ 4 files changed, 36 insertions(+), 49 deletions(-) delete mode 100644 src/directives/language.ts create mode 100644 src/plugins/switchLanguage.ts create mode 100644 src/typings/switchLanguage.ts diff --git a/src/directives/language.ts b/src/directives/language.ts deleted file mode 100644 index 4f71ffa..0000000 --- a/src/directives/language.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { watchEffect, DirectiveBinding } from 'vue' -import { useStore } from '@/store' -import { chineseLanguageLoader } from '@/i18n/util' - -interface MyHtmlElement extends HTMLElement { - stopHandler: (() => void) | null -} - -/* - ep:v-language:title="state.obj" -*/ - -export default { - mounted(el: MyHtmlElement, binding: DirectiveBinding) { - if (el.stopHandler) { - el.stopHandler() - el.stopHandler = null - } - el.stopHandler = watchEffect(() => { - const store = useStore() - const language = store.language - const { arg, value } = binding - - if (!Object.keys(value)?.length || !arg) { - return '' - } - - let content = '' - if (language === 'zh') { - content = value[arg] - } - if (language === 'en' && value[arg + 'En']) { - content = value[arg + 'En'] - } else if (language === 'en' && !value[arg + 'En']) { - content = value[arg] - } - if (language === 'tw') { - content = chineseLanguageLoader(value[arg]) - } - el.innerHTML = content - }) - }, - beforeUnmount(el: MyHtmlElement) { - el.stopHandler && el.stopHandler() - el.stopHandler = null - } -} diff --git a/src/main.ts b/src/main.ts index 3cd6008..7831c22 100644 --- a/src/main.ts +++ b/src/main.ts @@ -7,6 +7,7 @@ import { get } from '@/http/http' import { i18n } from '@/i18n' import { useStore } from '@/store' import directives from '@/directives' +import { switchLanguage } from '@/plugins/switchLanguage' import '@/assets/scss/index.scss' import 'animate.css/animate.min.css' @@ -29,7 +30,7 @@ get('/static/offline/JSON/config.json').then(res => { pinia.use( PiniaLogger({ disabled: process.env.NODE_ENV === 'production', - expanded: true, + expanded: false, showDuration: true, showStoreName: true, logErrors: true @@ -39,5 +40,5 @@ get('/static/offline/JSON/config.json').then(res => { const store = useStore() store.SET_CONFIG(res.data as Record) - app.use(router).use(i18n).mount('#app') + app.use(router).use(i18n).use(switchLanguage).mount('#app') }) diff --git a/src/plugins/switchLanguage.ts b/src/plugins/switchLanguage.ts new file mode 100644 index 0000000..16b7acd --- /dev/null +++ b/src/plugins/switchLanguage.ts @@ -0,0 +1,26 @@ +import { useStore } from '@/store' +import type { App } from 'vue' +import { chineseLanguageLoader } from '@/i18n/util' + +export const switchLanguage = { + install: (app: App) => { + const store = useStore() + + app.config.globalProperties.switchLanguage = (value: V, key: K): V[K] => { + const language = store.language + let content: any + if (language === 'zh') { + content = value[key] + } + if (language === 'en' && value[(key + 'En') as keyof typeof value]) { + content = value[(key + 'En') as keyof typeof value] + } else if (language === 'en' && !value[(key + 'En') as keyof typeof value]) { + content = value[key] + } + if (language === 'tw') { + content = chineseLanguageLoader(value[key]) + } + return content + } + } +} diff --git a/src/typings/switchLanguage.ts b/src/typings/switchLanguage.ts new file mode 100644 index 0000000..b1ebb67 --- /dev/null +++ b/src/typings/switchLanguage.ts @@ -0,0 +1,7 @@ +declare module '@vue/runtime-core' { + export interface ComponentCustomProperties { + // eslint-disable-next-line no-unused-vars + switchLanguage: (value: V, key: K) => V[K] + } +} +export {}