iconfont 图标在vue里的使用

简介: 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、效果图如下:


相关文章
|
3天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
10 0
|
4天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
4天前
|
JavaScript 数据库
ant design vue日期组件怎么清空 取消默认当天日期
ant design vue日期组件怎么清空 取消默认当天日期
|
4天前
|
JavaScript C++
vue高亮显示组件--转载
vue高亮显示组件--转载
9 0
|
4天前
|
JavaScript 前端开发 数据安全/隐私保护
揭秘Vue中v-model的内部工作机制
揭秘Vue中v-model的内部工作机制
|
3天前
|
JavaScript 开发工具 git
Vue 入门系列:.env 环境变量
Vue 入门系列:.env 环境变量
10 1
|
3天前
|
JavaScript
vue知识点
vue知识点
11 0
|
4天前
|
JavaScript 前端开发 定位技术
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
|
4天前
|
JavaScript
Vue中避免滥用this去读取data中数据
Vue中避免滥用this去读取data中数据
|
4天前
|
JavaScript
vue中使用pinia及持久化
vue中使用pinia及持久化
6 0