Element-Plus 学习笔记一

  • Element-Plus 学习笔记一已关闭评论
  • 103 次浏览
  • A+
所属分类:Web前端
摘要

这几天在学vue3, 用Element-plus 加 vue3 搭了个框架,在这里记录一下项目搭建中遇到的问题。

这几天在学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 的选择框组件在聚焦时会出现黑边的问题

Element-Plus 学习笔记一

   解决方案:添加以下样式

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