[JavaScript知识库]element-plus在vue3中样式不显示的问题

最近在尝试vue3和element-plus构建新项目，记录一下遇到element-plus组件的显示问题。遇到了两个问题

• 组件样式不显示
• icon图标不显示

1.问题描述：

element-plus组件的显示，使用input组件的时候，无法显示element-plus的样式

element-plus使用全局引用

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.use(router).mount('#app')

解决办法

参考element plus官网的使用指南[https://element-plus.gitee.io/zh-CN/guide/quickstart.html]，发现引入方法进行了一些更新。

全局引入时，只引入了element plus，没有引入css文件。增加css的引入后，问题解决。

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
// 增加的引入
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.use(router).mount('#app')

2.问题描述：

在写登录模块的时候，想在账号和密码的input框前加上icon图标，但使用el-icon后，只有一块空白的占位，无法显示icon图标。

<el-input type="text" prefix-icon="el-icon-user"/>

解决办法

查阅官方文档https://element-plus.gitee.io/zh-CN/component/icon.html

发现element-plus进行版本更新后，不能直接使用icon图标，需要以组件引入的方式引入后再使用。

组件中单独引入使用到的icon

<template>
	<el-icon>
		<Search />
	</el-icon>
	<el-icon>
		<Edit />
	</el-icon>
</template>

<script >
//首先是导入需要使用的图标
import {Search,Edit} from "@element-plus/icons";
export default {
  //写入components中
  components: {
    Search,
    Edit
  }
};
</script>

在main.js中统一引入

官方也提供了一种统一引入所有icon的方法，这样更方便，在组件中可以直接使用

// 统一导入el-icon图标
import * as ElIconModules from '@element-plus/icons'

// 统一注册el-icon图标
for(let iconName in ElIconModules){
  app.component(iconName,ElIconModules[iconName])
}

以上的el-input的icon显示问题，在统一引入的情况下可以改为以下代码

<el-input type="text">
  <template #prefix>
    <el-icon><User /></el-icon>
  </template>
</el-input>