建站
咨詢
售后
建站咨詢
新聞中心
阿里矢量圖標?在項目中都用使用，通常一般我們引入css?使用iconfont?,或者我們使用svg?加載圖標，亦或我們可以使用Unicode?，除了第一種與第二種，今天分享第三種方式unicode加載圖標，希望看完在項目中能有所思考和幫助。
成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供安丘網(wǎng)站建設(shè)、安丘做網(wǎng)站、安丘網(wǎng)站設(shè)計、安丘網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、安丘企業(yè)網(wǎng)站模板建站服務(wù)，十多年安丘做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。
css加載圖標
這是我們項目中最常用的一種方式。
我在自己的iconfont倉庫中添加了幾個圖標。
打開前陣子我開源的一個移動端項目topfreeApplication
我們在common.less中引入阿里矢量圖標的這個css。
/*src/assets/css/common.less*/
@import url('./normalize.less');
@import url('//at.alicdn.com/t/c/font_3470263_sw1krly77xh.css');
我在src/pages/home/component/Search.vue引入一個圖標。
所以加入了一行代碼,就將刪除圖標就加入我們的頁面中了。
svg圖標
在這之前，我們都是用class?方式加載，現(xiàn)在我們看下svg方式加載圖標。
在src/pages/home/component/Search.vue?組件中也看到我使用一個svg-icon的二次組件加載圖標的。
我把svg-icon注冊成一個全局組件。
src/components/index.ts
import SvgIcon from './svg-icon';
import DataEmpty from './data-empty';
const customComponents = {
SvgIcon,
CDataEmpty: DataEmpty,
};
export const installComponent = (app) => {
// 自定義注冊全局組件
Object.keys(customComponents).forEach((key: string) => {
app.component(key, customComponents[key]);
});
};
注意我們必須引入iconfont.js具體可以參考使用web文檔
uniCode 加載圖標
我們注意到我們css加載圖標實際上圖標的一個偽類元素加載的一個unicode。
加載圖標實際上是引用了一個uncode?，所以我們可以借雞生蛋。
我們注意到我們在i?標簽上將icon-shanchu?替換成了自己自定義的一個class?，但同時也多了一個自定義屬性unicode=""?,這是一個很有用的屬性，通常我們需要動態(tài)的更換圖標時，我們就可以把這個unicode寫在標簽上，那怎么才能顯示呢？
css?有一個超強的函數(shù)特性attr?,在css里面我們可以動態(tài)的取到unicode的值。
我們看下css?代碼,注意unicode就是你標簽上的那個屬性。
.maic-del {
&::before {
content: attr(unicode);
}
}注意到?jīng)]有，利用attr?這個特性就可以成功的加載到unicode?了（不過注意，因為我這個是vue3項目，在vue2中，我們必須v-html渲染這整個標簽，不然圖標始終顯示不出來）
所以你會發(fā)現(xiàn)在css?中你用attr?這個屬性就可以動態(tài)的加載標簽上的unicode了。
css的Attr
在以上我們的圖標用unicode?就可以加載圖標，同時我們也知道利用css中的attr函數(shù)成功解決了圖標加載問題。
我們看看attr這個屬性可以在我們項目中怎么用,在哪些場景可以用？
我們嘗試寫一個計數(shù)器。
對應(yīng)的css。
* {
padding: 0;
margin: 0;
}
:root {
--color: red;
--width: 200px;
--height: 200px;
}
#app {
width: var(--width);
height: var(--height);
margin: 0 auto;
border: 1px solid var(--color);
}
#app button {
margin: 5px 10px;
}
.content {
height: calc(var(--width) / 2);
border: 1px solid green;
text-align: center;
line-height: calc(var(--width) / 2);
font-size: 50px;
}
.content::before {
content: attr(data-content);
display: inline-block;
}我們使用了css3?的函數(shù)var?,以及calc?,還有attr?，這些都是css3?的函數(shù)，注意var?中的變量必須在:root{}?中用--xxx申明成全局，即可使用
看下布局后的基本頁面。
我們再看下對應(yīng)的?js。
// requestAnimationFrame 模擬setInterval
function customizeSetInterval(callback, interval) {
let timer = null;
let startTime = Date.now();
let loop = () => {
let endTime = Date.now();
if (endTime - startTime >= interval) {
startTime = endTime = Date.now();
callback(timer);
}
timer = window.requestAnimationFrame(loop);
};
loop();
return timer;
}
const startBtn = document.getElementById("startBtn");
const contentDom = document.querySelector(".content");
let initData = contentDom.dataset.content * 1;
startBtn.onclick = function () {
setCount();
};
// 計數(shù)操作
function setCount(interval = 1000) {
const timer = customizeSetInterval(() => {
if (initData >= 0) {
startBtn.innerText = "正在計數(shù)...";
contentDom.setAttribute("data-content", initData--);
}
if (initData === -1) {
startBtn.innerText = "重新計數(shù)";
}
}, interval);
if (initData === -1) {
initData = 10;
window.cancelAnimationFrame(timer);
}
}
我們通過操作.content的data-content,因此可以實現(xiàn)一個簡單的倒計時效果。
因此我們就用css中attr?結(jié)合js?實現(xiàn)了一個計數(shù)器功能，關(guān)于cssattr?還有更多待挖掘的功能，在動態(tài)改變圖標等，attr是一種不錯的選擇方案
總結(jié)
- 加載阿里矢量圖標除了使用class與svg?,我們也可以使用attr?加載使用unicode。
- css3?函數(shù)var,calc,attr的使用。
- 使用css的attr特性簡單實現(xiàn)計數(shù)器的效果。
- 本文示例code example?。
參考資料
[1]iconfont： https://www.iconfont.cn/
[2]topfreeApplication： https://github.com/maicFir/topfreeApplication
[3]web文檔： https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code
[4]code example： https://github.com/maicFir/lessonNote/tree/master/html/07-attr
分享文章：Css3的attr函數(shù)使用，加載unicode圖標
轉(zhuǎn)載來于：http://m.5511xx.com/article/dhcdehp.html
