vue element ui實現多語言切換

2021-10-08 07:43:42 字數 1630 閱讀 8542

首先我們建立乙個lang的檔案 ,裡面建立三個檔案index.js(引入使用i18n模組), en.js(英文包), zh.js(中文包)… 其他語言的包

index.js 檔案:

import vue from 'vue' // 引入vue

import vuei18n from 'vue-i18n' // 引入i18n模組

import cookies from 'js-cookie' // 封裝了獲取,設定,刪除cookie的方法

import elementenlocale from 'element-ui/lib/locale/lang/en' // element-ui英文包

import elementzhlocale from 'element-ui/lib/locale/lang/zh-cn'// element-ui中文包

import locale from 'element-ui/lib/locale' // 引入elementuiui語言包模組

import enlocale from './en' // 本地英文包

import zhlocale from './zh' // 本地中文包

vue.use(vuei18n) // vue使用i18n模組

// 引入本地

const messages =

, zh:

}// 建立國際化例項

const i18n = new vuei18n(

)locale.i18n

((key, value) => i18n.t

(key, value)

)export default i18n

en.js檔案:

export default

,skin:

}

zh.js檔案

export default

,skin:

}

之後main.js中使用編寫的i18n模組的index.js檔案

import i18n from './lang'

new vue(

)

切換語言模組

中文english

使用

//作為文字內容,繫結在標籤中} 

//作為屬性繫結

:label="$t('message.uname')" prop="pnone">

"loginuser.pnone" placeholder="請輸入手機或郵箱">

//作為elementui 中的校驗規則,要放在computed中

computed:

,$/,

message

:"輸入6-16位包含數字、字母、特殊字元的密碼",

trigger

:"blur"

} ],

};}},

// 用於elemenui表單自定義檢驗中

vue Element ui 實現分頁

實現分頁功能的關鍵技術點為頁面顯示的結果處理,而此處的關鍵技術點為js的slice 方法。首先介紹slice 方法 slice 方法可從已有的陣列中返回選定的元素。slice 方法可提取字串的某個部分,並以新的字串返回被提取的部分。主要用法 array.slice start,end 引數描述 st...

vue element ui 實現分頁效果

我使用得是el table el pagination來實現的,話不多說,直接上 編輯刪除 export default inject reload 注入reload方法 data created mounted methods handlecurrentchange function curren...

vue Element ui實現分頁效果

當我們向後台請求大量資料的時候,並要在頁面展示出來,請求的資料可能上百條資料或者更多的時候,並不想在乙個頁面展示,這就需要使用分頁功能來去完成了。1.本次所使用的是vue2.0 element ui實現乙個分頁功能,element ui這個元件特別豐富,分頁中給我提供了乙個pagination 分頁...