了解深圳网站页面设计,建筑图纸怎样识图,公司网站开发排名,win7iis部署asp.net网站过程
安装依赖#xff0c;配置#xff0c;当点击中英文切换按钮时候#xff0c;全局变换#xff0c;element-plus组件也需要中英文切换。 确定初始化的语言在setting中#xff0c;页面加载会读取里面的语言走一次语言的初始化配置#xff0c;后面就是按钮切换
代码
仅…过程
安装依赖配置当点击中英文切换按钮时候全局变换element-plus组件也需要中英文切换。 确定初始化的语言在setting中页面加载会读取里面的语言走一次语言的初始化配置后面就是按钮切换
代码
仅供参考 安装 vue-i18n: ^9.10.1,main.js
import i18n from /lang/index // 国际化
app.use(i18n) //中英切换src下新建文件夹lang再新建package文件夹同级别index.js
import { createI18n } from vue-i18n
import Elp_ZhCn from element-plus/dist/locale/zh-cn.mjs
import Elp_en from element-plus/dist/locale/en.mjs// 本地语言包
import enLocale from ./package/en.json
import zhCnLocale from ./package/zh-cn.jsonconst messages {// zh-cn: {// ...zhCnLocale// },zh: {...zhCnLocale,...Elp_ZhCn,},en: {...enLocale,...Elp_en,},
}const i18n createI18n({legacy: false,locale: window.localStorage.getItem(language) || zh,messages: messages,
})export default i18n
package下的en.json和zh-cn.json类似下面 days: 天,days: days,一开始确认默认的语言.main.js中配置ep的
templateel-config-provider :localeappStore.locale :sizeappStore.sizerouter-view //el-config-provider
/template
script setup
import { ElConfigProvider } from element-plus
import { useAppStore } from /store/modules/app.js
const appStore useAppStore()console.log(ep的语言为, appStore.locale.name)
/script
走小仓库app.js
import { defineStore } from pinia
import { useStorage } from vueuse/core
import defaultSettings from /setting// 导入 Element Plus 中英文语言包
import zhCn from element-plus/es/locale/lang/zh-cn
import en from element-plus/es/locale/lang/en// setup
export const useAppStore defineStore(app, () {// stateconst device useStorage(device, desktop)const size useStorage(size, defaultSettings.size)console.log(初始化的 ~ useAppStore ~ defaultSettings.language:, defaultSettings.language)const language useStorage(language, defaultSettings.language)console.log(初始化的 ~ useAppStore ~ language:, language)const sidebarStatus useStorage(sidebarStatus, closed)const sidebar reactive({opened: sidebarStatus.value ! closed,withoutAnimation: false,})// const documentTitle useStorage(documentTitle, defaultSettings.title);document.title defaultSettings.titleconst activeTopMenu useStorage(activeTop, )/*** 根据语言标识读取对应的语言包*/const locale computed(() {if (language?.value en) {return en} else {return zhCn}})// actionsfunction toggleSidebar() {sidebar.opened !sidebar.openedsidebar.withoutAnimation falseif (sidebar.opened) {sidebarStatus.value opened} else {sidebarStatus.value closed}}function closeSideBar(withoutAnimation) {sidebar.opened falsesidebar.withoutAnimation withoutAnimationsidebarStatus.value closed}function openSideBar(withoutAnimation) {sidebar.opened truesidebar.withoutAnimation withoutAnimationsidebarStatus.value opened}function toggleDevice(val) {device.value val}function changeSize(val) {size.value val}/*** 切换语言** param val*/function changeLanguage(val) {language.value val}/*** 混合模式顶部切换*/function changeTopActive(val) {activeTopMenu.value val}return {device,sidebar,language,locale,size,activeTopMenu,toggleDevice,changeSize,changeLanguage,toggleSidebar,closeSideBar,openSideBar,changeTopActive,}
})
其中setting是自定义的配置
// import logo from /assets/images/error_images/401.png // 使用相对路径导入图片
//用于项目logo|标题配置
export default {title: Lucky_Star, //项目的标题logo: /logo.svg, //项目public下的// logo: logo, //项目logo设置logoHidden: true, //logo组件是否隐藏设置language: zh, // zh| enfixedHeader: true,tagsView: false,sidebarLogo: true,
}
按钮切换
import i18n from /langimport { useAppStore } from /store/modules/app.js
import { useI18n } from vue-i18n
const { locale } useI18n()
const appStore useAppStore()const changeLanZ () {console.log(切为中文)locale.value zhi18n.global.locale.value zhappStore.changeLanguage(zh)
}const changeLanE () {locale.value enconsole.log(切为英文)i18n.global.locale.value enappStore.changeLanguage(en)
}
