Element-Plus 學習筆記一

這幾天在學vue3, 用Element-plus 加 vue3 搭了個框架，在這裡記錄一下項目搭建中遇到的問題。

1、使用 Element-plus 的 icon 圖標，顯示不出來

    首先，用命令行中安裝 Element-plus 的圖標：

　　npm install @element-plus/icons-vue --save

   然後，在 main.js 中進行全局註冊，添加以下代碼：

import * as ElementIcon from '@element-plus/icons-vue' 

//全局導入plus圖標
for(let iconName in ElementIcon)
{
    app.component(iconName,ElementIcon[iconName])
}

　最後，在畫面上使用圖標，需要套一層 template, 否則顯示不出來

                    <el-input size="large" clearable v-model="ruleForm.username" placeholder="請輸入用戶名" >
                        <template #prefix>
                            <el-icon>
                                <UserFilled />
                            </el-icon>
                        </template>
                    </el-input>

2.修改 Element-Plus 主題顏色

  參考地址 ： https://element-plus.gitee.io/zh-CN/guide/theming.html 

  參照官網上 添加 sass 文件的方式沒有修改成功，最後使用 css 的方式修改樣式成功。

  首先，添加一個新的 css 文件，如 style.css

  在文件中添加代碼，修改主題的樣式：

:root {
  --el-color-primary:#279DB9;
}

  然後，打開 main.js 文件，在 Element-Plus  預設的樣式後面添加引用

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import './styles/style.css'

3.Element-Plus 的選擇框組件在聚焦時會出現黑邊的問題

   解決方案：添加以下樣式

.el-popper:focus{
  outline: none !important;
}