為什么不切圖示了
以前的圖示我們非常喜歡用ps等工具切成一張張xxx.png圖片，如果稍微懂點移動端適配，對dpr(設備像素比)有所了解的，還會切出類似[email protected],[email protected],[email protected]這樣的圖示，其中@1x表示用來適配dpr為1的手機，影像解析度最低；@2x表示用來適配dpr為2的手機，影像解析度稍高一些；@3x用來適配dpr為3的手機，影像解析度最高，
最后，借助媒體查詢如@media(min-device-pixel-ratio: 2){ }這樣的代碼對不同dpr的手機寫上對應解析度的圖片，在大型專案中，本地靜態圖片可能類似這樣：
這是非常混亂且難以管理的，
而且，png格式也好，jpg格式也罷，作為位圖，它們都有兩個天然的缺陷：一是圖片資源體積小與清晰度高這兩者不可兼得；二是無論清晰度再怎么高，放大后依然不清晰，
我們可以簡單感性地理解一下：位圖是由很多個像素點構成的，理論上，位圖的像素和螢屏上的物理像素一一對應，就可以達到最佳的顯示效果，然而現在dpr>1的螢屏比比皆是，在這種場景下，位圖的一個像素會由多個物理像素來渲染，在網頁縮放時是更是如此，縮放厲害時一個位影像素可能橫跨幾百個物理像素，
這會帶來兩個問題：一是多個物理像素對應一個位影像素會顯得很大，也就是所謂的“鋸齒感”，二是這些物理像素并不能準確獲取對應位影像素的顏色，很多取近似值的情況，導致顏色很雜，
我們從iconfont中找一個圖示檔案，下載其對應的png圖片，通過放大來看看效果：
可以看到放大后，一是有不少“大方塊”，二是出現了一些“近似色”，
為什么矢量圖會更清晰？因為矢量圖，比如svg，是一種對影像的形狀描述，比如描述曲線、形狀、顏色等，本質上屬于文本檔案，不僅體積小，放大后質量也不會下降，
怎么專挑圖示下手
對矢量圖來說，繪制的路徑過于復雜，顏色過于豐富，也會導致繪制性能下降，這是矢量圖的缺點，所以我們不可能拿矢量圖去繪制一張廣告背景圖，但是圖示卻很合適，因為圖示往往沒有復雜的顏色資訊，也沒有像風景人像圖那樣復雜的線條，
在vue專案中試試阿里圖示
- 打開阿里圖示官網 https://www.iconfont.cn/
- 登錄
- 新建一個專案
- 找幾個圖示，添加至專案
- 選擇“Font class”方式引入，并下載專案到本地
選擇Font class的原因一是語意化，二是通過類名來定義具體圖示非常方便封裝
6. 將解壓出來的檔案夾重命名后放到專案的
src/assets目錄下(放在這里是因為assets目錄在初始化的時候就被認為是一個用于存放靜態資源的目錄)
- 現在可以開始著手封裝
如果你看過我之前關于echart封裝那篇文章，就會發現我非常不推薦將封裝的公共組件的單檔案直接寫在components根目錄下，這是一個非常差的習慣，強烈建議再建一級目錄，同時為你的公共組件寫上README和使用示例，以及入參說明，這會極大的方便后續使用者的呼叫
封裝之前的思考
在封裝之前，我們需要考慮以下幾點：
- 可以通過type或者name入參來標識具體是哪個圖示
- 要提供最常用的樣式入參，一個是圖示顏色color，另外一個是圖示大小size
- 能回應事件
- 使用者能定制一些特殊樣式如旋轉角度rotation，縮放倍數scale等
- 如果在業務上有需要，做的更好一點，還可以提供dot和badge功能，也就是圖示右上角的小紅點和數量
能做到前四點，就已經完成了一個基礎版圖示組件的封裝；如果能加上第五點，給這手封裝打個90分，我認為沒有問題，
封裝的原始碼及說明
下面這個是沒有dot和badge的，也就是一個青春版的圖示組件封裝，如果點贊超過10個，我會更新一個尊享版的，
<template>
<!-- 有兩個注意點：一是iconfont這個類名必須添加，二是通過$listeners將父作用域中的事件監聽器匯入進來，這樣就可以正常相應點擊事件 -->
<i
:class="name"
class="iconfont"
:style="{ fontSize: `${size}px`, color }"
v-on="$listeners"
></i>
</template>
<script>
export default {
name: "Icon",
props: {
// 圖示名稱
name: {
type: String,
default: ""
},
// 圖示顏色
color: {
type: String,
default: ""
},
// 圖示大小
size: {
type: [String, Number],
default: 20
}
}
};
</script>
<style lang="less" scoped>
// 這里加～是因為當你在一個資源路徑最前面加了～時，webpack會把這個路徑對應的檔案視為一個module（模塊）去決議
// 這樣@對應的alias，也就是專案的src目錄才會被正確識別，這步決議是webpack做的，和網上很多文章說的css-loader沒有一毛錢關系
// 還有一種寫法是@import url()，兩種寫法都可以，沒有對錯之分
@import "~@/assets/iconfont/iconfont.css";
.iconfont {
cursor: pointer;
}
</style>
在這里，需要特別說明以下為什么類名一定要默認添加一個“iconfont”，簡單來說，因為只有.iconfont這個類名繼承了特殊名為"iconfont"的字體家族，我們可以在iconfont.css原始碼中驗證這一點：
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1586688927486'); /* IE9 */
src: url('iconfont.eot?t=1586688927486#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAQcAAsAAAAACEAAAAPQAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqEKINlATYCJAMMCwgABCAFhG0HNxssB1GULUqM7CMhN9F6CVFamUwxYBhOWrS38fC13+/c3f3vmwFJkniD7NNJopFEKiRIlWE6pTNdNNQ30OZCMTk7sLo2ozc2cY1cNN61VXFVvwrYriJ84t7pH3Ue2HyW5TLH1k9dgHFAge153gUScIEE5IE0jF3QEm8T6FjkSOo4OjETUFCYiwJxj7JLAIWMXWnghJapqthZxJOGVnpIFwAeg8/HD/dQIGlk5sqTuygmEPqu+bwfJGrCtUdQTOcF20fGFkAhbiv958AovwXUUfUyzbWVIqSpUv//E8g1Y7XRH14iKqa+B9lrunRRCkdE8NEvgwbXv48KLTzjH5pnhlZVmzvcdbUh86U2U5TeLKlFkZYjUzpEj9bZQa1WkmZNinXbhgOm5nRbjlkfkdDbxCFdkuxjlDZJardOG3ZPEpTf5ETbCtBJ0aMoiW77kSNdR5erHjXaqa/fKqG1Dzt3i2kkyaiiZbZAVTptuvQzYimJhE5RWSSZKeuMI6igVq1Mers2tQYeEYtp2VVtle3VrUQLpBx1F1dNVU5XTxITRRX8T2aM0Fvq5X9E7+TCYeaU085ToeelpK/+4y66VYlyn3qu3I0iCrnmW1sa86Wk1730UD7CKzIH481E6Dd3vfPqEWHsON1uBNh1gzoob5zk/+0ccdtw/qh+lu+6ffZVFkG28Z/Xbi6eOTvOGBgSKguzqszqHgsLnp5WPaWafAeojbJTTa8UuMnKZ3Y4ul92teL6ywx/urUKWhLPKjOc3H5zVeb2MHjrtGdg464F04Gubz+/kIJhSaaZJRIswfuGwdYt6NjkqOZRjWOKjopRHeSgpbneCgU1HDXgGk2gGIB6KF/KoUHxbp7LFv/6O+ZfKn8WqQZ+bXULeDus1Q9j9VABuju13kQg+LOKjj1FU5mOXBS5IzcS2Y2/l0voaG41DE/cG26c7dxMaJlNkDQtIGtZIgt7Cw1dO6i07KFjU8z+rikMKEobG3YDhJF5JAOvyEYukoV9Fw1z3qIyChAdp6F5YtdKoFAEhpTgCBMu3QijDAGfZbtwKGxNR9hruSVYWhVwaQhWgaZgN2fXfCkG4SPYFGsq1rHdcZwFszABD44G9yFcrgAWYoJyhIE7l+G40N/FhVX1JGeGgAdAjmAQJXAIJlipjWAoBgE+ljcYBxXenw7BthZXCayBURWnQWAqoKPD3Dhz7UDG6PmdGLcyvsI6bO5wOBaex4IR4IFFQy+Ca+UFYMLqaeUQDDhnZQOyQv5cUD9WV73z8kbe+x2CDvPCHClyFHlbJJJ3Wo+gG1A+AAA=') format('woff2'),
url('iconfont.woff?t=1586688927486') format('woff'),
url('iconfont.ttf?t=1586688927486') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1586688927486#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-qq:before {
content: "\e613";
}
.icon-weixin:before {
content: "\e79f";
}
將icon.vue注冊到全域
我們在使用iconfont的時候，不可能每個使用到的組件都來手動引入一遍icon.vue，因為圖示組件算是應用非常廣的一個基礎公共組件，我們可以把它注冊到全域，方便使用，在專案的main.js里面引入并注冊它，注冊全域組件的指令是Vue.component，它接收兩個引數，第一個是組件名稱，第二個是組件本身，main.js代碼如下：
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import Icon from "./components/icon/icon.vue";
Vue.config.productionTip = false;
Vue.component(Icon.name, Icon);
new Vue({
router,
render: h => h(App)
}).$mount("#app");
使用效果
在任意地方使用如下：
<template>
<icon name="icon-weixin" size="40" @click="iconClickHandler" />
</template>
<script>
export default {
methods: {
iconClickHandler() {
console.log("點擊了圖示");
}
}
};
</script>
打開瀏覽器可以看到已經成功顯示，點擊圖示控制臺也有列印
為你的公共組件添加說明檔案
在書寫公共組件時，說明檔案是非常重要的，要讓別人一看就懂，實際作業中沒有多少人會有興趣去通過閱讀你的原始碼來看看怎么使用，這樣效率太低了,書寫README檔案如下：
實際專案怎么跟UI配合
在實際專案中，一般來說一個iconfont專案的管理員就是UI設計師，它會不定時將自己設計的圖示上傳到這個專案里面，并通知開發者手動下載更新本地的靜態資源檔案，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/124752.html
標籤：JavaScript
上一篇：js之ES6的Class類
下一篇：React組件拆分與傳值