vue中手动封装iconfont组件解析(三种引用方式的封装和使用)

 更新时间:2022年09月08日 11:00:05   作者:艾欢欢  
这篇文章主要介绍了vue中手动封装iconfont组件(三种引用方式的封装和使用),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

在线使用 有时候会因网络问题影响用户体验;直接放在 本地使用 ,如果过多使用也会显得繁琐,所以就可以将其封装成一个组件,也方便维护。​

封装基于阿里巴巴图标库的项目图标。

准备

将项目内的图标下载至本地

img

在了路径 src/assets 下新建文件夹 iconfont ,用来存放字体图标的本地文件

解压下载到本地的字体图标文件,放到 iconfont 文件夹下

如过项目中没有下载 css-loader 依赖包,就进行下载,否则会报错

1
npm install css-loader -D

封装

unicode引用封装

1
2
3
4
5
6
<template>
  <div>
    <span class="iconfont" v-html="name"></span>
    <slot></slot>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
<script>
export default {
  name: 'iconUnicode',
  props: {
    name: {
      type: String,
      required: true
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style scoped>
@font-face {
  /* Unicode  */
  font-family: "iconfont";
  src: url("../assets/iconfont/iconfont.eot");
  src: url("../assets/iconfont/iconfont.eot?#iefix") format("embedded-opentype"),
    url("../assets/iconfont/iconfont.woff2") format("woff2"),
    url("../assets/iconfont/iconfont.woff") format("woff"),
    url("../assets/iconfont/iconfont.ttf") format("truetype"),
    url("../assets/iconfont/iconfont.svg#iconfont") format("svg");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 2em;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>

font-class引用封装

1
2
3
4
5
6
<template>
  <div>
    <span class="iconfont" :class="iconTag"></span>
    <slot></slot>
  </div>
</template>

   

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
import "../assets/iconfont/iconfont.css";
export default {
  name: "iconFontClass",
  props: {
    name: {
      type: String,
      required: true
    }
  },
  computed: {
    iconTag() {
      return `icon-${this.name}`;
    }
  }
};
</script>
1
2
3
4
5
6
7
8
9
<style scoped>
.iconfont {
  font-family: "iconfont" !important;
  font-size: 2em;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>

symbol引用封装

1
2
3
4
5
6
7
8
<template>
  <div>
    <svg class="icon" aria-hidden="true">
      <use :xlink:href="iconTag" rel="external nofollow" ></use>
    </svg>
    <slot></slot>
  </div>
</template>

   

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
import "../assets/iconfont/iconfont.js";
export default {
  name: "iconSymbol",
  props: {
    name: {
      type: String,
      required: true
    }
  },
  computed: {
    iconTag() {
      return `#icon-${this.name}`;
    }
  }
};
</script>
1
2
3
4
5
6
7
8
9
<style scoped>
.icon {
  width: 2em;
  height: 2em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

引入

全局引入

1
2
3
4
// main.js
// 引入并注册全局组件
import iconUnicode from './ui/iconUnicode'
Vue.component('iUnicode', iconUnicode)

局部引入

1
2
3
4
5
6
7
8
9
10
// 局部引入并使用
import iSymbol from "../ui/iconSymbol"
import iFont from "../ui/iconFontClass"
export default {
   //注册
  components: {
    iSymbol,
    iFont
  }
};

使用

1
2
3
4
5
6
7
<template>
  <div class="box">
    <i-symbol name="fanhuidingbu">Symbol</i-symbol>
    <i-font name="fanhuidingbu">Font class</i-font>
    <i-unicode name="&#xe633;" style="font-size:30px;color:#333">Unicode</i-unicode>
  </div>
</template>

效果图:

最后

也可以通过在线链接进行封装,但不管是在线使用还是本地使用,每次在项目中添加新图标之后都要更新一下 本地iconfont文件 或者 在线链接 。

demo 已上传 GitHub

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://blog.csdn.net/AiHuanhuan110/article/details/89920073

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • vue项目中,main.js,App.vue,index.html的调用方法

    vue项目中,main.js,App.vue,index.html的调用方法

    今天小编就为大家分享一篇vue项目中,main.js,App.vue,index.html的调用方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue实现两种路由权限控制方式

    Vue实现两种路由权限控制方式

    路由权限控制常用于后台管理系统中,对不同业务人员能够访问的页面进行一个权限的限制。本文主要介绍了两种Vue 路由权限控制,具有一定的参考价值,感兴趣的可以了解一下
    2021-10-10
  • vue+elementUI组件table实现前端分页功能

    vue+elementUI组件table实现前端分页功能

    这篇文章主要为大家详细介绍了vue+elementUI组件table实现前端分页功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • 一文详解Vue中nextTick的原理与作用

    一文详解Vue中nextTick的原理与作用

    Vue的nextTick方法是用于在DOM更新后执行回调的工具函数,它的作用是在当前JavaScript执行环境中延迟执行回调,以确保在下次DOM更新循环之前,可以访问到更新后的DOM,本文就给大家介绍一下Vue nextTick原理与作用,需要的朋友可以参考下
    2023-08-08
  • 前端XSS攻击场景详解与Vue.js处理XSS的方法(vue-xss)

    前端XSS攻击场景详解与Vue.js处理XSS的方法(vue-xss)

    这篇文章主要给大家介绍了关于前端XSS攻击场景与Vue.js使用vue-xss处理XSS的方法,介绍了实际工作中渲染数据时遇到XSS攻击时的防范措施,以及解决方案,需要的朋友可以参考下
    2024-02-02
  • Css中该如何使用Vue的变量

    Css中该如何使用Vue的变量

    在我们使用Vue开发时,经常会用到CSS,下面这篇文章主要给大家介绍了关于Css中该如何使用Vue变量的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • vue组件间传值的6种方法总结

    vue组件间传值的6种方法总结

    这篇文章主要给大家介绍了关于vue组件间传值的6种方法,组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,需要的朋友可以参考下
    2023-08-08
  • vue使用自定义指令实现一键复制功能

    vue使用自定义指令实现一键复制功能

    在Vue中,通过自定义指令v-copy和document.execCommand方法,可以实现点击按钮复制内容到剪贴板的功能,适用于处理长文本或多行文本的复制需求,而readonly属性可避免内容被修改和移动设备上的虚拟键盘干扰,感兴趣的朋友一起看看吧
    2024-09-09
  • vue 页面卡死,点击无反应的问题及解决

    vue 页面卡死,点击无反应的问题及解决

    这篇文章主要介绍了vue 页面卡死,点击无反应的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • this在vue和小程序中的使用详解

    this在vue和小程序中的使用详解

    这篇文章主要介绍了this在vue和小程序中的使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01

最新评论