欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中手動(dòng)封裝iconfont組件解析(三種引用方式的封裝和使用)

 更新時(shí)間：2022年09月08日 11:00:05   作者：艾歡歡  
這篇文章主要介紹了vue中手動(dòng)封裝iconfont組件(三種引用方式的封裝和使用)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

在線使用 有時(shí)候會(huì)因網(wǎng)絡(luò)問題影響用戶體驗(yàn)；直接放在 本地使用 ，如果過多使用也會(huì)顯得繁瑣，所以就可以將其封裝成一個(gè)組件，也方便維護(hù)。?

封裝基于阿里巴巴圖標(biāo)庫(kù)的項(xiàng)目圖標(biāo)。

準(zhǔn)備

將項(xiàng)目?jī)?nèi)的圖標(biāo)下載至本地

img

在了路徑 src/assets 下新建文件夾 iconfont ，用來存放字體圖標(biāo)的本地文件

解壓下載到本地的字體圖標(biāo)文件，放到 iconfont 文件夾下

如過項(xiàng)目中沒有下載 css-loader 依賴包，就進(jìn)行下載，否則會(huì)報(bào)錯(cuò)

npm install css-loader -D

封裝

unicode引用封裝

<template>
  <div>
    <span class="iconfont" v-html="name"></span>
    <slot></slot>
  </div>
</template>
  
 
<script>
export default {
  name: 'iconUnicode',
  props: {
    name: {
      type: String,
      required: true
    }
  }
}
</script>

<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引用封裝

<template>
? <div>
? ? <span class="iconfont" :class="iconTag"></span>
? ? <slot></slot>
? </div>
</template>

   

<script>
import "../assets/iconfont/iconfont.css";
export default {
? name: "iconFontClass",
? props: {
? ? name: {
? ? ? type: String,
? ? ? required: true
? ? }
? },
? computed: {
? ? iconTag() {
? ? ? return `icon-${this.name}`;
? ? }
? }
};
</script>
<style scoped>
.iconfont {
? font-family: "iconfont" !important;
? font-size: 2em;
? font-style: normal;
? -webkit-font-smoothing: antialiased;
? -moz-osx-font-smoothing: grayscale;
}
</style>

symbol引用封裝

<template>
? <div>
? ? <svg class="icon" aria-hidden="true">
? ? ? <use :xlink:href="iconTag" rel="external nofollow" ></use>
? ? </svg>
? ? <slot></slot>
? </div>
</template>

   

<script>
import "../assets/iconfont/iconfont.js";
export default {
? name: "iconSymbol",
? props: {
? ? name: {
? ? ? type: String,
? ? ? required: true
? ? }
? },
? computed: {
? ? iconTag() {
? ? ? return `#icon-${this.name}`;
? ? }
? }
};
</script>
<style scoped>
.icon {
? width: 2em;
? height: 2em;
? vertical-align: -0.15em;
? fill: currentColor;
? overflow: hidden;
}
</style>

引入

全局引入

// main.js
// 引入并注冊(cè)全局組件
import iconUnicode from './ui/iconUnicode'
Vue.component('iUnicode', iconUnicode)

局部引入

// 局部引入并使用
import iSymbol from "../ui/iconSymbol"
import iFont from "../ui/iconFontClass"
export default {
   //注冊(cè)
  components: {
    iSymbol,
    iFont
  }
};

使用

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

效果圖：

最后

也可以通過在線鏈接進(jìn)行封裝，但不管是在線使用還是本地使用，每次在項(xiàng)目中添加新圖標(biāo)之后都要更新一下 本地iconfont文件 或者 在線鏈接 。

demo 已上傳 GitHub

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。 

相關(guān)文章

  • Nuxt.js之自動(dòng)路由原理的實(shí)現(xiàn)方法

    Nuxt.js之自動(dòng)路由原理的實(shí)現(xiàn)方法

    這篇文章主要介紹了Nuxt.js之自動(dòng)路由原理的實(shí)現(xiàn)方法，nuxt.js會(huì)根據(jù)pages目錄結(jié)構(gòu)自動(dòng)生成vue-router模塊的路由配置。非常具有實(shí)用價(jià)值，需要的朋友可以參考下
    2018-11-11
  • vue?watch報(bào)錯(cuò):Error?in?callback?for?watcher?"xxx":"TypeError的解決方法

    vue?watch報(bào)錯(cuò):Error?in?callback?for?watcher?"xxx&qu

    這篇文章主要給大家介紹了關(guān)于vue?watch報(bào)錯(cuò):Error?in?callback?for?watcher?“xxx“:“TypeError:Cannot?read?properties?of?undefined的解決方法,需要的朋友可以參考下
    2023-03-03
  • vue?指令版富文本溢出省略截取示例詳解

    vue?指令版富文本溢出省略截取示例詳解

    這篇文章主要為大家介紹了vue?指令版富文本溢出省略截取示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-09-09
  • Vue中$attrs和$listeners詳解以及使用方法

    Vue中$attrs和$listeners詳解以及使用方法

    最近在研究Vue的組件庫(kù),之前也用過$attrs和$listeners,官方文檔描述的不太詳細(xì),也沒有太好的例子,下面這篇文章主要給大家介紹了關(guān)于Vue中$attrs和$listeners詳解以及使用的相關(guān)資料,需要的朋友可以參考下
    2022-11-11
  • vue使用GraphVis開發(fā)無限拓展的關(guān)系圖譜的實(shí)現(xiàn)

    vue使用GraphVis開發(fā)無限拓展的關(guān)系圖譜的實(shí)現(xiàn)

    本文主要介紹了vue使用GraphVis開發(fā)無限拓展的關(guān)系圖譜，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2021-08-08
  • Vue3開發(fā)必備的六個(gè)VSCode插件推薦

    Vue3開發(fā)必備的六個(gè)VSCode插件推薦

    在VSCode中添加好用的插件可以提高我們的開發(fā)效率,這些可以幫助我們格式化,擴(kuò)充性,執(zhí)行最佳實(shí)踐的代碼方式,自動(dòng)完成一些瑣碎的事情,下面這篇文章主要給大家推薦介紹了關(guān)于Vue3開發(fā)必備的六個(gè)VSCode插件,需要的朋友可以參考下
    2022-12-12
  • 詳解vue中v-model和v-bind綁定數(shù)據(jù)的異同

    詳解vue中v-model和v-bind綁定數(shù)據(jù)的異同

    這篇文章主要介紹了vue中v-model和v-bind綁定數(shù)據(jù)的異同,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2020-08-08
  • vue實(shí)現(xiàn)彈窗拖拽效果

    vue實(shí)現(xiàn)彈窗拖拽效果

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)彈窗拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-09-09
  • 使用Vue實(shí)現(xiàn)瀑布流的示例代碼

    使用Vue實(shí)現(xiàn)瀑布流的示例代碼

    這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)瀑布流,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2024-02-02
  • vue3中使用swiper的完整版教程(超詳細(xì)!)

    vue3中使用swiper的完整版教程(超詳細(xì)!)

    工作中日常筆記,vue中使用swiper插件,在pc端和h5端也是常用的插件,下面這篇文章主要給大家介紹了關(guān)于vue3中使用swiper的完整版教程,需要的朋友可以參考下
    2023-04-04

最新評(píng)論