精华内容
下载资源
问答
  • element-ui图标库
    2020-11-27 22:03:21

    参考链接:

    https://www.cnblogs.com/zhengao/p/8480192.html

    更多相关内容
  • vue项目element-ui自身插件库图标太少,样式单一。使用阿里图标库丰富自身element-ui的图标~~~~~~凑字数
  • Element-UI - Vue项目整合Element-UI & Icon图标 & 自定义Icon图标 博主很久之前就想使用Element-UI,总是因为学习后端的技术鸽了很久(博主目前是偏后端),这里博主通过Vue来整合Element-UI(不是Vue项目...

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

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

    引入Element-UI

    npm安装

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

    npm i element-ui -S
    
    • i:是install的简写。
    • -S:即--save(保存),包会被注册到package.jsondependencies里面。
    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
    

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

    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    
    Vue.use(ElementUI)
    

    在这里插入图片描述
    这样就可以在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>
    

    很明显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>
    

    建议使用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>
    

    引入这些文件后,就可以使用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>
    

    效果和上面是一样的,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>
    

    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>
    

    查看有哪些图标:

    自定义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>
    

    代码:

    <!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>
    

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

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

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

    展开全文
  • Element-ui组ICON图标

    2021-03-06 21:59:38
    Element 内置丰富的图标库 主要有以下两种方法 设置类名 el-icon-xxx 通常使用i 元素 在Element部分组件中设置icon属性 二、页面效果 三、内置图标:以下为Element2.8.2版本提供的所有图标 ...

    Element-ui组ICON图标

    一、基本用法

    Element 内置丰富的图标库 主要有以下两种方法

    1. 设置类名 el-icon-xxx 通常使用i 元素
    2. 在Element部分组件中设置icon属性

    二、页面效果

    在这里插入图片描述

    三、内置图标:以下为Element2.8.2版本提供的所有图标

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • element-ui 图标太少解决方案

    千次阅读 2021-06-11 15:00:56
    采用阿里云的图标库(地址:https://www.iconfont.cn/),下载下来扩充到项目中去 操作流程 参考:https://www.jianshu.com/p/a6b54662753b 批量导入图标 点击f12,选择consele,粘贴下面代码,回车 var icons = ...

    背景

    element的图标太少了,需要扩展图标

    解决方式

    采用阿里云的图标库(地址:https://www.iconfont.cn/),下载下来扩充到项目中去

    操作流程

    参考:https://www.jianshu.com/p/a6b54662753b

    批量导入图标

    点击f12,选择consele,粘贴下面代码,回车

    var icons = document.querySelectorAll('.icon-gouwuche1');
    var auto_click = function(i) {
        if (i < icons.length) {
            setTimeout(function() {
                icons.item(i).click();
                auto_click(i + 1);
            },
            600);
        }
    };
    auto_click(0);
    

    在这里插入图片描述

    展开全文
  • element-ui官网 1、安装 npm install element-ui --save-dev 2、在main.js文件中引入 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); 3、上面两...
  • Element-UI本地引入

    2019-09-17 12:14:44
    Element-UI本地引入,在jsp里不能通过url引入就只能用本地引入了(注意修改css中关于字体和图标的位置链接)
  • Element-ui和vue-element-admin学习

    千次阅读 2020-05-27 00:23:05
    根据官网的说法,Element-ui,是一套为开发者、设计师和产品经理准备的基于Vue 2.0的由饿了么公司出品的桌面端组件。 官网:https://element.eleme.cn/#/zh-CN 如何使用? 1、创建文件夹element-ui。 2、下载...
  • 升级elementUI后发布图标不显示踩坑
  • Element-uiElement-Plus的区别_Element2和Element3的区别 一、定义区别 Element-UI对应Element2:基本不支持手机版 Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件 Element-Plus...
  • 1、安装npm install element-ui --save-dev2、在main.js文件中引入import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);3、上面两步完成后,就可以在项目任意的...
  • element-ui简单笔记

    2021-05-05 19:43:10
    文章目录前言一、 element-ui简介1.1Element UI 引言1.2 定义1.3 由来二、element-ui 的安装2.1 通过vue脚手架暗转2.2 在vue脚手架项目中安装三、按钮组件实例3.1 默认样式3.2 简洁样式3.3 图标按钮四、按钮组件的...
  • 但是美中不足的是,官方提供的图标库只是部分,在需要新的icon时,我就想到了引入第三方icon。对我来说,阿里的icon库就很方便,之前的项目也是用的这个库。 先是查看了Element官方文档,没发现有提示如何引用第三...
  • 第一步:下载字体图标 选择好要下载的字体图标后 点击下载代码,得到一个压缩包 第二步 解压后将文件夹放到项目src/assets中 第三步 打开解压后的文件夹中的demo——index.html 可选fontclass引用 在项目入口文件...
  • Element-UI的使用

    2022-07-04 18:45:48
    Element-ui概述 Element-ui,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件,提供了配套设计资源,帮助你的网站快速成型。由饿了么公司前端团队开源。 element-ui的上手使用还是挺容易的,在理想情况...
  • element-ui自带的图标库还是不够全,还是需要需要引入第三方icon,自己在用的时候一直有些问题,参考了些教程,详细地记录补充下 对于我们来说,首选的当然是阿里icon库 教程: 1.打开阿里icon,注册 >登录>图标管理...
  • 在main.js里面添加如下代码,导入element-ui。在绑定的xxx.vue里面加入代码。安装成功之后,文件夹会多出一个。我加入的是隐藏tooltip代码。在main.js中加入。
  • 我们使用element-ui、vue开发网站的时候,往往图标是起着很重要的作用。 1.傻瓜式引用:由于这种方法及其简单 省去了很多繁琐的步骤, a.引入项目生成的,图标地址。 b.使用 推荐使用这种,详情请看文档!!文档够...
  • element-ui打包注意事项

    2021-04-11 21:04:32
    最近使用Element-UI出现打包时出现了失败问题 失败信息如下: ERROR in static/js/vendor.5e8a4b30ebc9acd80332.js from UglifyJs Unexpected token: punc (() [./node_modules/_element-ui@2.15.1@element-ui/...
  • Element-Ui组件(二)Icon 图标

    万次阅读 多人点赞 2019-06-03 16:16:39
    Element内置丰富的图标库,主要有以下2种用法: 设置类名el-icon-xxx,通常使用i元素 在Element部分组件中设置icon属性 页面效果 以下是通过上述两种用法制作的简单导航工具条: 示例代码 &l...
  • 结论:element-ui的最终形式就是一个外部的新Vue组件,可以添加集成到Vue主组件中,element-ui这个组件内部也包含着很多的Vue组件,例如Select、Button等。 2、主入口文件:./src/index.js,此入口文件继承了所有...
  • vue element-ui引入第三方图标

    千次阅读 2022-03-04 16:57:34
    打开iconfont-阿里巴巴矢量图标库,注册登录之后回到首页 在首页顶部菜单 图标管理>我的项目 点击新建项目 新建项目 项目名称随意 记住设置的前缀,一会儿要用 去图标库里搜索选择自己需要的图标 加入到购物车 ...
  • 为了减少页面的加载速度,提高用户体验,对于一些图片决定使用图标代替,但是发现element-ui的图标少得可怜,完全满足不了我的要求,于是决定在element-ui的项目里引入第三方的图标库. 因为阿里巴巴海量的图标,所以决定...
  • Vue.js 项目 Element-UI 组件引入 Echarts 图表:安装 Echarts,main.js 引入 Echarts,引入 Echarts 主题 walden,Vue 页面绘制 Echarts 图表,运行效果。
  • Element-UI 本地离线引入

    千次阅读 2021-10-18 10:17:24
    element-ui官网只提供了两种引入方式 因项目需求Element-UI 需要离线使用 查找资料找到了使用方法 1.下载element.js 2.下载element.css demo.html 测试 <!DOCTYPE html> <html lang="en"> <head>...
  • 由于是模仿element-ui进行的组件封装,所以在发布时也是用element-ui的打包结构。 12.1目录调整 我们新建一个vue项目,并且在根目录创建两个文件夹就packages和examples。 packages:用于存放所有的组件examples...
  • Mint-ui(移动组件) Element-ui

    千次阅读 2019-12-04 23:54:00
    Mint-ui(移动组件) Element-ui
  • element-ui的按钮增加图标

    千次阅读 2022-02-22 09:43:13
    elementUI中的图标库是有限的,如何给按钮增加别的图标呢

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,531
精华内容 3,012
关键字:

element-ui图标库