当前位置: 首页 > news >正文

iconfont 图标在vue里的使用

刚好项目需要使用一个iconfont的图标,所以记录一下这个过程

1、iconfont-阿里巴巴矢量图标库 这个注册一个账号,以便后续使用下载代码时需要

2、寻找自己需要的图标

  我主要是找两个图标 ,一个加号,一个减号,分别加入到购物车里

 3、点购物车

4、添加项目

 

5、进入项目后进行项目设置,勾上下面这些

 

 6、生成代码,一把使用font class

 7、下载解压

 8、把上面勾选文件复制到自己vue项目的@assets里,如下

 9、在main.js里加入css

import '@/assets/styles/iconfont/iconfont.css'

10、这样就可以在实际项目里使用了

如下,用树的加减号,当然这个是个例子:

<el-table :data="data" border style="width: 100%" :row-style="showTr" highlight-current-row @selection-change="selsChange" :style="tableMaxHeight"><el-table-column type="selection" width="55"> </el-table-column><el-table-column v-for="(column, index) in columns" :key="column.dataIndex" :label="column.text" align="left"><template slot-scope="scope"><span v-if="spaceIconShow(index)" v-for="(space, levelIndex) in scope.row._level" class="ms-tree-space"></span><span v-if="toggleIconShow(index,scope.row)" @click="toggle(scope.$index)"><i v-if="!scope.row._expanded" class="iconfont icon-jiahao" aria-hidden="true"></i><i v-if="scope.row._expanded" class="iconfont icon-jianshao" aria-hidden="true"></i></span><span v-else-if="index===0" class="ms-tree-space"></span><span v-html="scope.row[column.dataIndex]"></span></template></el-table-column><slot></slot></el-table>

11、效果图如下:

 

http://www.lryc.cn/news/146747.html

相关文章:

  • QT登陆注册界面练习
  • MySQL DATE_SUB的实践
  • OpenCV最常用的50个函数
  • Android AGP8.1.0组件化初探
  • 文件修改时间能改吗?怎么改?
  • 2023年下半年软考报名注意事项!
  • 【LeetCode每日一题】——274.H指数
  • 网络编程 day 4
  • 【Java架构-版本控制】-Git基础
  • ubuntu 挂载硬盘操作
  • 关于商品活动的H5页面技术总结
  • 前端:横向滚动条,拖动进行左右滚动(含隐藏滚动条)
  • Android JNI Bitmap指定颜色值替换
  • 测试理论与方法----测试流程的第四个步骤:执行测试,提出缺陷
  • Stable Diffusion 提示词入门指南
  • 基于鹰栖息算法优化的BP神经网络(预测应用) - 附代码
  • 想要搞懂接口测试和功能测试有什么区别,那就必须知道他们的基本原理
  • Spring: HiddenHttpMethodFilter的用法
  • Vue入门学习(一)
  • 软考:中级软件设计师:无线网,网络接入技术,ipv6
  • dart 学习 之 同步生成器(sync*)和 异步生成器(async*)
  • JSX基础
  • Linux Day11---mbash项目(二)
  • 回归预测 | MATLAB实现IBES-ELM改进的秃鹰搜索优化算法优化极限学习机多输入单输出回归预测(多指标,多图)
  • 【Golang】go条件编译
  • 学习创建第一个 React 项目
  • 使用Python构建网络爬虫:提取网页内容和图片资源
  • 推荐两款开源的绘制流程图软件
  • echarts画一个简单的饼图 中间是空的 环有两种颜色一种是底色 一种是百分比的颜色
  • 5 群起集群