最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

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詳解

    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接入高德地圖的完整實例

    Vue接入高德地圖的完整實例

    近期在用vue做一個環(huán)保類的項目,要求使用高德地圖,下面這篇文章主要給大家介紹了關(guān)于Vue接入高德地圖的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-06-06
  • Vue-CLI 3.X 部署項目至生產(chǎn)服務(wù)器的方法

    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)

    今天小編就為大家分享一篇Vue2.0 v-for filter列表過濾功能的實現(xiàn),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • 將Vue組件庫更換為按需加載的方法步驟

    將Vue組件庫更換為按需加載的方法步驟

    這篇文章主要介紹了將Vue組件庫更換為按需加載的方法步驟,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-05-05
  • Vue+tsx使用slot沒有被替換的問題

    Vue+tsx使用slot沒有被替換的問題

    本文主要介紹了Vue+tsx使用slot沒有被替換的問題,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-08-08
  • vue隱藏路由的實現(xiàn)方法

    vue隱藏路由的實現(xiàn)方法

    這篇文章主要介紹了vue隱藏路由的實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • vue截圖轉(zhuǎn)base64轉(zhuǎn)文件File異步獲取方式

    vue截圖轉(zhuǎn)base64轉(zhuǎn)文件File異步獲取方式

    這篇文章主要介紹了vue截圖轉(zhuǎn)base64轉(zhuǎn)文件File異步獲取方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • vue設(shè)置代理不起作用問題及解決

    vue設(shè)置代理不起作用問題及解決

    這篇文章主要介紹了vue設(shè)置代理不起作用問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-05-05
  • vue實現(xiàn)自定義el-table穿梭框功能

    vue實現(xiàn)自定義el-table穿梭框功能

    這篇文章主要介紹了vue實現(xiàn)自定義el-table穿梭框功能,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-02-02

最新評論

永寿县| 屯留县| 兴城市| 灵石县| 镇宁| 汉中市| 阿勒泰市| 都安| 台东市| 三台县| 中西区| 云霄县| 潮州市| 盐池县| 曲阜市| 陕西省| 阜阳市| 文登市| 蒙山县| 察隅县| 东乌| 林芝县| 建水县| 威远县| 赤水市| 闽清县| 囊谦县| 安康市| 沅陵县| 施秉县| 嘉荫县| 容城县| 定南县| 冕宁县| 衡水市| 安多县| 土默特左旗| 南陵县| 和平县| 邢台县| 河南省|