Element-UI - Vue项目整合Element-UI & Icon图标 & 自定义Icon图标_element-ui用自定义icon

作者：羊村懒王 | 2024-04-20 22:20:24

踩

element-ui用自定义icon

Element-UI - Vue项目整合Element-UI & Icon图标 & 自定义Icon图标

博主很久之前就想使用Element-UI，总是因为需要学习后端技术鸽了很久（博主目前是偏后端），这里博主通过Vue项目来整合Element-UI。

引入Element-UI

npm安装

Vue项目整合Element-UI会用到，这里博主介绍一下。

npm i element-ui -S
1

i：是install的简写。
-S：即--save（保存），包会被注册到package.json的dependencies里面。

E:\workspace\WebStorm\blog\project>
E:\workspace\WebStorm\blog\project>npm i element-ui -S
...
+ element-ui@2.14.1
added 6 packages from 6 contributors in 7.474s
1
2
3
4
5

在这里插入图片描述
在Vue项目入口文件main.js中添加：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
1
2
3
4

在这里插入图片描述
这样就可以在Vue项目中使用Element-UI了。

修改App.vue：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    <i class="el-icon-platform-eleme"></i>
    <i class="el-icon-delete-solid"></i>
    <i class="el-icon-loading"></i>
    <p class="el-icon-folder-add"></p>
    <el-button type="primary" icon="el-icon-search">搜索</el-button>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

很明显Element-UI使用成功了。
在这里插入图片描述
CDN

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
1
2
3
4

建议使用CDN引入Element-UI时锁定版本，以免将来Element-UI升级时受到非兼容性更新的影响。

如版本2.14.1：

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui@2.14.1/lib/index.js"></script>
1
2
3
4

引入这些文件后，就可以使用Element-UI了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>images</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="../js/vue.js"></script>
    <script src="https://unpkg.com/element-ui@2.14.1/lib/index.js"></script>
</head>
<body>
  <div id="app">
      <i class="el-icon-platform-eleme"></i>
      <i class="el-icon-delete-solid"></i>
      <i class="el-icon-loading"></i>
      <p class="el-icon-folder-add"></p>
      <el-button type="primary" icon="el-icon-search">搜索</el-button>
  </div>
</body>
</html>
<script>
    var vue = new Vue({
        el: '#app'
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

效果和上面是一样的，Element-UI使用成功了。
在这里插入图片描述
Javascript文件引入顺序如下，因为Element-UI是基于Vue2的，所以要先引入Vue。

    <script src="../js/vue.js"></script>
    <script src="https://unpkg.com/element-ui@2.14.1/lib/index.js"></script>
1
2

Icon图标

Element-UI提供了一套常用的图标集合。直接通过设置类名为el-icon-iconName来使用即可，上面的代码中也有涉及。

      <i class="el-icon-platform-eleme"></i>
      <i class="el-icon-delete-solid"></i>
      <i class="el-icon-loading"></i>
      <p class="el-icon-folder-add"></p>
1
2
3
4

查看有哪些图标：

图标集合

自定义Icon图标

Element-UI提供的图标还是有限的，所以需要自定义Icon图标，通过下面代码就可以自定义Icon图标，很简单吧（知道CSS即可）。

<style>
    .el-icon-dog{
        background: url(../img/dog.png) center no-repeat;  /*使用自己的图片来替换*/
        background-size: contain;
    }
    .el-icon-dog:before{
        content: "dog";                                    /*before属性中的content文本是用来占位的,必须有*/
        font-size: 50px;                                   /*可以设置字体大小来确定图标大小*/
        visibility: hidden;                                /*使用visibility: hidden;来隐藏文字*/
    }
</style>
1
2
3
4
5
6
7
8
9
10
11

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>images</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="../js/vue.js"></script>
    <script src="https://unpkg.com/element-ui@2.14.1/lib/index.js"></script>
</head>
<body>
  <div id="app">
      <i class="el-icon-platform-eleme"></i>
      <i class="el-icon-delete-solid"></i>
      <i class="el-icon-loading"></i>
      <p class="el-icon-folder-add"></p>
      <p class="el-icon-dog"></p>
      <el-button type="primary" icon="el-icon-search">搜索</el-button>
  </div>
</body>
</html>
<style>
    .el-icon-dog{
        background: url(../img/dog.png) center no-repeat;  /*使用自己的图片来替换*/
        background-size: contain;
    }
    .el-icon-dog:before{
        content: "dog";                                    /*before属性中的content文本是用来占位的,必须有*/
        font-size: 50px;                                   /*可以设置字体大小来确定图标大小*/
        visibility: hidden;                                /*使用visibility: hidden;来隐藏文字*/
    }
</style>
<script>
    var vue = new Vue({
        el: '#app'
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

效果如下图所示：
在这里插入图片描述
很明显效果符合预期。

Vue项目整合Element-UI、Icon图标以及自定义Icon图标就介绍到这里。

写博客是博主记录自己的学习过程，如果有错误，请指正，谢谢！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/459677