vue后臺管理添加多語言功能的實現(xiàn)示例
更新時間:2021年04月20日 10:59:57 作者:武向前
這篇文章主要介紹了vue后臺管理添加多語言功能的實現(xiàn)示例,幫助大家更好的理解和學(xué)習(xí)使用vue框架,感興趣的朋友可以了解下
在這家公司一個項目, 需要添加英文版本,就是中英文化了,直接上代碼
1.首先是main.js頁面做配置
import VueI18n from 'vue-i18n'
Vue.use(VueI18n) // 通過插件的形式掛載
const i18n = new VueI18n({
//locale: 'zh-CN', // 語言標識
locale: 'Chinese', // 語言標識
//this.$i18n.locale // 通過切換locale的值來實現(xiàn)語言切換
messages: {
'Chinese': require('./common/lang/zh'), // 中文語言包
'English': require('./common/lang/en') // 英文語言包
},
//隱藏警告
silentTranslationWarn: true
})
new Vue({
el: '#app',
router,
i18n,
components: { App },
template: '<App/>'
})
2.配置相應(yīng)路徑下的語言包,在這兒只顯示部分代碼,需要什么在這兒添加什么即可
en.js
export const m = {
deviceCode: 'Device Code',//設(shè)備編碼
deviceName: 'Device Name',//設(shè)備名稱
deviceType: 'Device Type',//設(shè)備類型
denial: 'Denial',//拒止
camera: 'Camera',//攝像機
}
zh.js
export const m = {
deviceCode: '設(shè)備編碼',//設(shè)備編碼
deviceName: '設(shè)備名稱',//設(shè)備名稱
deviceType: '設(shè)備類型',//設(shè)備類型
denial: '拒止',//拒止
camera: '攝像機',//攝像機
}
3.頁面中使用,不同的地方使用,寫法略有不同
(1)placeholder和按鈕的寫法
<el-row :gutter="30">
<el-col :span="4">
<div class="grid-content bg-purple">
<el-input v-model="value0" :placeholder="$t('m.placeOne')"></el-input>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<el-button @click="searchData()" type="primary" icon="el-icon-search">{{ $t('m.query') }}</el-button>
<el-button @click="dialogVisible = true" type="warning">{{ $t('m.AddDevice') }}</el-button>
</div>
</el-col>
</el-row>(2)table的寫法
<el-table
:data="tableData"
stripe
style="width: 100%;">
<el-table-column
prop="areaName"
:label="$t('m.areaName')"
width="100">
</el-table-column>
</el-table>
(3)子組件彈框?qū)懛?
<el-dialog :title="$t('m.Ediedevice')" :visible.sync="dialogVisibles" width="30%" :before-close="handleClose" :close-on-click-modal=false>
<edit-equipment @subsuccess="subsuccess" :editDate="editDate" style="overflow: hidden;"></edit-equipment>
</el-dialog>
(4)js中拼接字符串寫法
strHtml = strHtml + "<td>"+this.$i18n.t('m.deviceCode')+":</td>";
以上就是vue后臺管理添加多語言功能的實現(xiàn)示例的詳細內(nèi)容,更多關(guān)于vue后臺管理添加多語言功能的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
elementUI如何動態(tài)給el-tree添加子節(jié)點數(shù)據(jù)children詳解
element-ui 目前基本成為前端pc網(wǎng)頁端標準ui框架,下面這篇文章主要給大家介紹了關(guān)于elementUI如何動態(tài)給el-tree添加子節(jié)點數(shù)據(jù)children的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
Vue-CLI 3.X 部署項目至生產(chǎn)服務(wù)器的方法
這篇文章主要介紹了Vue-CLI 3.X 部署項目至生產(chǎn)服務(wù)器的方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Vue2.0 v-for filter列表過濾功能的實現(xiàn)
今天小編就為大家分享一篇Vue2.0 v-for filter列表過濾功能的實現(xiàn),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue截圖轉(zhuǎn)base64轉(zhuǎn)文件File異步獲取方式
這篇文章主要介紹了vue截圖轉(zhuǎn)base64轉(zhuǎn)文件File異步獲取方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03

