亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

vue-i18n結(jié)合Element-ui的配置

孫淑建 / 1061人閱讀

摘要：官網(wǎng)已經(jīng)做了詳細(xì)介紹，這里依葫蘆畫瓢跟著實(shí)現(xiàn)一下為了實(shí)現(xiàn)插件的多語言切換按照如上把國際化文件都整合到一起，避免中大段引入相關(guān)代碼。

使用方法： 在配合 Element-UI 一起使用時(shí)，會(huì)有2個(gè)問題： ####（1）、頁面刷新后，通過按鈕切換的語言還原成了最初的語言，無法保存 ####（2）、框架內(nèi)部自帶的提示文字無法更改，比如像時(shí)間選擇框內(nèi)部中的提示文字 關(guān)于第一個(gè)問題，可以在初始化VueI18n實(shí)例時(shí)，通過 localStorage 來為 locale 對(duì)象賦值

在切換語言的時(shí)候可以緩存不同的語言選項(xiàng)，并且可以長(zhǎng)期保存，不會(huì)因?yàn)樗⑿戮W(wǎng)頁而改變locale 的屬性值
const i18n = new VueI18n({ locale: localStorage.getItem("locale") || "zh", messages })

關(guān)于第二個(gè)問題，更改Element 組件內(nèi)部語言，這里還涉及到 手動(dòng)處理 vue-i18n@6.x 兼容性問題。 http://element-cn.eleme.io/#/... 官網(wǎng)已經(jīng)做了詳細(xì)介紹，這里依葫蘆畫瓢跟著實(shí)現(xiàn)一下 ###i18n.js import Vue from "vue" import VueI18n from "vue-i18n" import locale from "element-ui/lib/locale"; import zh from "./langs/zh" import en from "./langs/en" import enLocale from "element-ui/lib/locale/lang/en" import zhLocale from "element-ui/lib/locale/lang/zh-CN"

Vue.use(VueI18n)

const messages = { en: Object.assign(en, enLocale), zh: Object.assign(zh, zhLocale) }

console.log(messages.zh)

const i18n = new VueI18n({ locale: localStorage.getItem("locale") || "zh", messages })

locale.i18n((key, value) => i18n.t(key, value)) //為了實(shí)現(xiàn)element插件的多語言切換

export default i18n

按照如上把國際化文件都整合到一起，避免main.js 中大段引入相關(guān)代碼。main.js 中與 i18n 相關(guān)的就只剩兩行代碼 ###main.js import i18n from "./i18n/i18n" // 1行

window.app = new Vue({ el: "#app", router, store, i18n, // 2行 components: { App }, template: "" })

---------------------------源碼如下--------------------------------------

// 工程本地 國際化
import locale_zh_CN from "./lang/zh-CN"
import locale_zh_TW from "./lang/zh-TW"
import locale_en_US from "./lang/en-US"
import locale_ko_KR from "./lang/ko-KR"

// ElementUI 國際化
import element_locale from "element-ui/lib/locale"
import element_zh_CN from "element-ui/lib/locale/lang/zh-CN"
import element_zh_TW from "element-ui/lib/locale/lang/zh-TW"
import element_en_US from "element-ui/lib/locale/lang/en"
import element_ko_KR from "element-ui/lib/locale/lang/ko"

import Vue from "vue"
import VueI18n from "vue-i18n"
Vue.use(VueI18n)

// 將各自的 國際化文件合并 拋出 (后期公共組件等插件的 國際化文件也需要考慮)
const messages = {

zh_CN: Object.assign(locale_zh_CN, element_zh_CN),
zh_TW: Object.assign(locale_zh_TW, element_zh_TW),
en_US: Object.assign(locale_en_US, element_en_US),
ko_KR: Object.assign(locale_ko_KR, element_ko_KR)

}

// i18n插件默認(rèn)給中文
const i18n = new VueI18n({

locale: window.localStorage.getItem("WEBFRONT_LANG") || "zh_CN",
messages

})

// 為了實(shí)現(xiàn)element插件的多語言切換
element_locale.i18n((key, value) => i18n.t(key, value))

export default i18n

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/109672.html

相關(guān)文章

  • Vue國際化處理 vue-i18n 以及項(xiàng)目自動(dòng)切換中英文

    摘要：直接上預(yù)覽鏈接國際化處理以及項(xiàng)目自動(dòng)切換中英文環(huán)境搭建命令進(jìn)入項(xiàng)目目錄，執(zhí)行以下命令安裝國際化插件項(xiàng)目增加國際化翻譯文件在項(xiàng)目的下添加文件夾增加中文翻譯文件以及英文翻譯文件，里面分別存儲(chǔ)項(xiàng)目中需要翻譯的信息。 0. 直接上 預(yù)覽鏈接 Vue國際化處理 vue-i18n 以及項(xiàng)目自動(dòng)切換中英文 1. 環(huán)境搭建 命令進(jìn)入項(xiàng)目目錄，執(zhí)行以下命令安裝vue 國際化插件vue-i18n...

    wangtdgoodluck 評(píng)論0 收藏0

  • vue-i18n和elementUI實(shí)現(xiàn)國際化

    摘要：為了滿足很多公司都已經(jīng)向方向發(fā)展顧使用多語言的網(wǎng)站已經(jīng)太普遍了所以是使用和實(shí)現(xiàn)國際化接下來我會(huì)盡量寫的詳細(xì)一點(diǎn)的內(nèi)容個(gè)人覺得的應(yīng)該寫得清楚一些安裝所需要用到的東西安裝安裝創(chuàng)建目錄編寫所需要用到的語言我只寫了中文和英文歡迎來到我 為了滿足很多公司都已經(jīng)向international方向發(fā)展,顧使用多語言的網(wǎng)站已經(jīng)太普遍了, 所以是使用vue-i18n和elementUI實(shí)現(xiàn)國際化.接下來我...

    _ang 評(píng)論0 收藏0

  • 記一次開源學(xué)習(xí)--D2Admin 人人企業(yè)版

    摘要：前言上個(gè)月月底開源組開源了使用適配人人企業(yè)版專業(yè)版的前端工程具體詳情見人人企業(yè)版適配發(fā)布。當(dāng)然，也督促自己產(chǎn)出一篇相關(guān)的文章，來記錄這次有趣的學(xué)習(xí)之旅。 Created by huqi at 2019-5-5 13:01:14 Updated by huqi at 2019-5-20 15:57:37 前言 上個(gè)月月底@D2開源組 開源了使用 D2Admin 適配 人人企業(yè)版(專業(yè)版) 的...

    notebin 評(píng)論0 收藏0

  • vue，使用vue-i18n實(shí)現(xiàn)國際化

    摘要：需求公司項(xiàng)目需要國際化，點(diǎn)擊按鈕切換中文英文安裝注入實(shí)例中，項(xiàng)目中實(shí)現(xiàn)調(diào)用和模板語法語言標(biāo)識(shí)通過切換的值來實(shí)現(xiàn)語言切換中文語言包英文語言包最后對(duì)應(yīng)語言包中文語言包首頁概覽公司概述財(cái)務(wù)報(bào)表更多附錄主要財(cái)務(wù)指標(biāo)對(duì)比分析新聞事件檔案 需求 公司項(xiàng)目需要國際化，點(diǎn)擊按鈕切換中文/英文 1、安裝 npm install vue-i18n --save 2、注入 vue 實(shí)例中，項(xiàng)目中實(shí)現(xiàn)調(diào)用 ...

    jsummer 評(píng)論0 收藏0

  • 基于Vue、vue-i18n實(shí)現(xiàn)國際化（多語言）

    摘要：在中引入調(diào)用第三方插件新建一個(gè)對(duì)象默認(rèn)語言配置語言選項(xiàng)是一個(gè)配置語言包文件和語言選項(xiàng)的文件，文件內(nèi)容大致如下語言包列表合并語言包是一個(gè)函數(shù)，判斷當(dāng)前設(shè)置的語言類型，如果沒有設(shè)置語言，則根據(jù)判斷是中文還是非中文，非中文則顯示英語。 vue-i18n官網(wǎng) https://kazupon.github.io/vue... 項(xiàng)目用vue-cli構(gòu)建，用到vue全家桶及webpack、iview...

    smallStone 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<