Element 元件內部預設使用中文,若希望使用其他語言,則需要進行多語言設定。以英文爲例,在 main.js 中
按需引入
import { Button, Select } from 'element-ui'
import lang from 'element-ui/lib/locale/lang/en'
import locale from 'element-ui/lib/locale' // 設定語言 locale.use(lang)
// 引入元件
Vue.component(Button.name, Button)
Vue.component(Select.name, Select)
如果使用其它語言,預設情況下中文語言套件依舊是被引入的,可以使用 webpack 的 NormalModuleReplacementPlugin 替換預設語言套件。
webpack.config.js
{
plugins: [
new webpack.NormalModuleReplacementPlugin(/element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, 'element-ui/lib/locale/lang/en')
]
}
element-ui
相容其他 i18n 外掛
<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/element-ui"></script>
<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>
<script>
ELEMENT.locale(ELEMENT.lang.en)
</script>
element-ui 設定了世界主流語言;
Element 的 theme-chalk 使用 SCSS 編寫,如果你的專案也使用了 SCSS,那麼可以直接在專案中改變 Element 的樣式變數。新建一個樣式檔案,例如 element-variables.scss
,寫入以下內容:
/* 改變主題色變數 */
$--color-primary: teal;
/* 改變 icon 字型路徑變數,必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
之後,在專案的入口檔案中,直接引入以上樣式檔案即可(無需引入 Element 編譯好的 CSS 檔案):
import Vue from 'vue'
import Element from 'element-ui'
import './element-variables.scss'
Vue.use(Element)
需要注意的是,覆蓋字型路徑變數是必需的,將其賦值爲 Element 中 icon 圖示所在的相對路徑即可。
如果你的專案沒有使用 SCSS,那麼可以使用命令列主題工具進行深層次的主題定製:
¶安裝工具
首先安裝「主題生成工具」,可以全域性安裝或者安裝在當前專案下,推薦安裝在專案裡,方便別人 clone 專案時能直接安裝依賴並啓動,這裏以全域性安裝做演示。
npm i element-theme -g
安裝白堊主題,可以從 npm 安裝或者從 GitHub 拉取最新程式碼。
# 從 npm
npm i element-theme-chalk -D
# 從 GitHub
npm i https://github.com/ElementUI/theme-chalk -D
¶初始化變數檔案
主題生成工具安裝成功後,如果全域性安裝可以在命令列裡通過 et
呼叫工具,如果安裝在當前目錄下,需要通過 node_modules/.bin/et
存取到命令。執行 -i
初始化變數檔案。預設輸出到 element-variables.scss
,當然你可以傳參數指定檔案輸出目錄。
et -i [可以自定義變數檔案]
> ✔ Generator variables file
如果使用預設設定,執行後當前目錄會有一個 element-variables.scss
檔案。內部包含了主題所用到的所有變數,它們使用 SCSS 的格式定義。大致結構如下:
$--color-primary: #409EFF !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
$--color-success: #67c23a !default;
$--color-warning: #e6a23c !default;
$--color-danger: #f56c6c !default;
$--color-info: #909399 !default;
...
¶修改變數
直接編輯 element-variables.scss
檔案,例如修改主題色爲紅色。
$--color-primary: red;
¶編譯主題
儲存檔案後,到命令列裡執行 et
編譯主題,如果你想啓用 watch
模式,實時編譯主題,增加 -w
參數;如果你在初始化時指定了自定義變數檔案,則需要增加 -c
參數,並帶上你的變數檔名。預設情況下編譯的主題目錄是放在 ./theme
下,你可以通過 -o
參數指定打包目錄。
et
> ✔ build theme font
> ✔ build element theme
¶引入自定義主題
和引入預設主題一樣,在程式碼裡直接參照「線上主題編輯器」或「命令列工具」生成的主題的 theme/index.css
檔案即可。
import '../theme/index.css'
import ElementUI from 'element-ui'
import Vue from 'vue'
Vue.use(ElementUI)
¶搭配外掛按需引入元件主題
如果是搭配 babel-plugin-component
一起使用,只需要修改 .babelrc
的設定,指定 styleLibraryName
路徑爲自定義主題相對於 .babelrc
的路徑,注意要加 ~
。
{
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "~theme"
}
]
]
}