《ElementUI 基础知识》png 图片扩展 icon用法

这篇具有很好参考价值的文章主要介绍了《ElementUI 基础知识》png 图片扩展 icon用法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

UI 设计给的切图是 .png 格式。但想与 Element UI icon 用法类似,方案如下。

实现

步骤一

准备图片

《ElementUI 基础知识》png 图片扩展 icon用法,《ElementUI 基础知识》,elementui,前端,javascript

步骤二

新建文件,可使用 CSS 预处理语言 stylscss

stylus 方式

文件 icon.styl

/* 定义一个混合 */
cfgIcon(w, h) {
    display: inline-block;
    width: w;
    height: h;
    background-size: w h;
    margin-right: 8px;
}

.my-icon-loading {
    background: url(./images/loading.png);
    cfgIcon(10px,10px);
}
.my-icon-stop {
    background: url(./images/stop.png);
    cfgIcon(10px,10px);
}
.my-icon-start {
    background: url(./images/start.png);
    cfgIcon(10px,10px);
}

scss 方式

文件 icon.scss

/* 定义一个混合 */
@mixin cfgIcon($w, $h) {
    display: inline-block;
    width: $w;
    height: $h;
    background-size: $w $h;
    margin-right: 8px;
}

.cfg-icon-loading {
    background: url(./images/loading.png);
    @include cfgIcon(10px,10px);
}
.cfg-icon-stop {
    background: url(./images/stop.png);
    @include cfgIcon(10px,10px);
}
.cfg-icon-start {
    background: url(./images/start.png);
    @include cfgIcon(10px,10px);
}

步骤三

全局导入。在 Vue 框架中直接导入即可。

<template>
  <div id="app">
    <router-view/>
  </div>
</template>
<style lang="stylus">
@import './css/icon.styl'
</style>

使用

el-button

<el-button icon="my-icon-start" class="el-button--active">启动服务</el-button>
<el-button icon="my-icon-stop">停止服务</el-button>
<el-button icon="my-icon-loading">重启服务</el-button>

《ElementUI 基础知识》png 图片扩展 icon用法,《ElementUI 基础知识》,elementui,前端,javascript

直接用 <i>

<i class="cfg-icon-start"/>
<i class="cfg-icon-file"/>
<i class="cfg-icon-file"/>

《ElementUI 基础知识》png 图片扩展 icon用法,《ElementUI 基础知识》,elementui,前端,javascript文章来源地址https://www.toymoban.com/news/detail-856095.html

到了这里,关于《ElementUI 基础知识》png 图片扩展 icon用法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • AI绘图实战(四):制作食品安全PPT所用的相关图片png、图标icon | Stable Diffusion成为设计师生产力工具

    S:你安装stable diffusion就是为了看小姐姐么? I :当然不是,当然是为了公司的发展谋出路~~ 预先学习 : 安装及其问题解决参考:《Windows安装Stable Diffusion WebUI及问题解决记录》; 运行使用时问题《Windows使用Stable Diffusion时遇到的各种问题整理》; 模型运用及参数《Stable D

    2024年02月12日
    浏览(52)
  • CTF-Misc基础知识之图片及各种工具

    MISC作为CTF中比较重要的一类题型,分值占比较大,为了帮助大家更好的学习MISC的做题方法,我总结了常见的图片类型中的几种题型及工具: 图片,音频,视频 首先就是大家常见的图片分析,图片修复,图片修改长宽高,图片拼接,二维码扫描,LSB隐写等等。 遇到图片类型

    2023年04月09日
    浏览(38)
  • 微信小程序基础知识--图片跳转,事件跳转,冒泡事件

    一、 图片携带的跳转 首页 错误 1.1    指定路径 导航组件 指定跳转的路径  并进行参数的传递? 传递数据的名称 ur1 指定跳转路径  传递id 1.2  js文件中显示跳转的id信息 详情页的js中  从服务器中读取的数据  并由console.log 表示出来的 1.3  常用跳转的方法    展示上图设

    2024年02月09日
    浏览(51)
  • 计算机体系结构基础知识介绍之缓存性能的十大进阶优化之编译器控制的预取和利用HBM扩展内存层次(七)

    硬件预取的替代方案是编译器在处理器需要数据之前插入预取指令来请求数据。 预取有两种类型: ■ 寄存器预取将值加载到寄存器中。 ■ 高速缓存预取仅将数据加载到高速缓存。 这两种类型都可以分为有错或无错的,即预取的地址是否会导致虚拟地址错误或保护错误的异

    2024年02月13日
    浏览(51)
  • 【STM32】基础知识 第五课 C 语言基础知识

    stdint.h 是从 C99 中引进的一个标准 C 库的文件. 路径: “D:MDK5.34ARMARMCCinclude” 运算符 含义 运算符 含义 按位与 ~ 按位取反 | 按位或 左移 ^ 按位异或 右移 按位与: num1 运算符 num2 结果 0 0 0 1 0 0 0 1 0 1 1 1 按位或: num1 运算符 num2 结果 0 | 0 0 1 | 0 1 0 | 1 1 1 | 1 1 按位异或: num1 运算符

    2024年02月13日
    浏览(68)
  • Unity | Shader基础知识(第九集:shader常用单词基础知识速成)

    目录 一、顶点(Vertex)和法线(Normal) 二、UV信息 三、 基础数据种类 1 基础数据种类 2 基础数据数组 3 基础数据数组的赋值 4 对数据数组的调用 四、 基础矩阵 1 基础矩阵种类  2 对矩阵数组的调用 2.1对一个数据的调用  2.2对多个数据的调用  2.3对数据的赋值 五、基础纹理种

    2024年02月01日
    浏览(69)
  • 数字电路基础知识系列(六)之LC滤波器的基础知识

    LC滤波器,是指将电感(L)与电容器 ©进行组合设计构成的滤波电路,可去除或通过特定频率的无源器件。电容器具有隔直流通交流,且交流频率越高越容易通过的特性。而电感则具有隔交流通直流,且交流频率越高越不易通过的特性。因此,电容器和电感是特性完全相反的被

    2024年02月03日
    浏览(87)
  • Opengl入门基础-基础知识

    通过之前的教程,我们已经拥有了开发环境,但是在真正开发程序之前,我们首先了解下Opengl的基本概念。 Opengl是什么? 通常网上会说Opengl是一种规范,一种接口,但是这种说法有点抽象,我们不妨先看看下面这个简单的gl流程 代码中可能有人对GLFW_OPENGL_PROFILE这类参数感到

    2024年02月11日
    浏览(45)
  • Unity中的热更新的基础知识,Xlua与ILRuntime基础知识

    热更新是指在不需要重新编译打包游戏的情况下,在线更新游戏中的一些非核心代码和资源,比如活动运营和打补丁。热更新分为资源热更新和代码热更新两种,代码热更新实际上也是把代码当成资源的一种热更新,但通常所说的热更新一般是指代码热更新。资源热更新主要

    2023年04月09日
    浏览(85)
  • YOLOv5基础知识入门(2)— YOLOv5核心基础知识讲解

    前言: Hello大家好,我是小哥谈。 YOLOV4出现之后不久,YOLOv5横空出世。YOLOv5在YOLOv4算法的基础上做了进一步的改进,使检测性能得到更进一步的提升。YOLOv5算法作为目前工业界使用的最普遍的检测算法,存在着很多可以学习的地方。本文将对YOLOv5检测算法的核心基础知识进行

    2024年02月14日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包