css3的attr函數(shù)使用,加載unicode圖標
阿里矢量圖標在項目中都用使用,通常一般我們引入css使用iconfont,或者我們使用svg加載圖標,亦或我們可以使用Unicode,除了第一種與第二種,今天分享第三種方式unicode加載圖標,希望看完在項目中能有所思考和幫助。
正文開始...
css加載圖標
這是我們項目中最常用的一種方式
我在自己的iconfont[1]倉庫中添加了幾個圖標
打開前陣子我開源的一個移動端項目topfreeApplication[2]
我們在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/svg-icon/view/Index.vue-->
<script lang="tsx">
// 必須引入iconfont.js
import '@/assets/font/iconfont';
import { defineComponent, PropType, useAttrs } from 'vue';
export default defineComponent({
name: 'SvgIcon',
props: {
name: {
type: String as PropType<string>,
default: '',
required: true,
},
iconClass: {
type: String as PropType<string>,
default: '',
required: false,
},
},
render() {
const { name, iconClass } = this;
return (
<svg class={`icon ${iconClass}`} aria-hidden="true" {...useAttrs()}>
<use xlinkHref={`#icon-${name}`}></use>
</svg>
);
},
});
</script>
<style lang="less" scoped>
.icon {
fill: currentColor;
overflow: hidden;
}
</style>
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文檔[3]
uniCode 加載圖標
我們注意到我們css加載圖標實際上圖標的一個偽類元素加載的一個unicode
加載圖標實際上是引用了一個uncode,所以我們可以借雞生蛋
<template>
<div class="search-bar">
<div class="inner">
<svg-icon name="sousuo" width="20" height="20" class="search-icon" />
<input
type="text"
v-model="searchVal"
@input="handleVal"
class="input-search"
placeholder="Search..."
/>
<svg-icon
name="guanbi"
width="20"
height="20"
class="close-icon"
@click="handleClear"
v-if="searchVal"
/>
<!-- <i class="iconfont icon-shanchu"></i> -->
<i class="iconfont maic-del" unicode=""></i>
</div>
</div>
</template>
我們注意到我們在i標簽上將icon-shanchu替換成了自己自定義的一個class,但同時也多了一個自定義屬性unicode="",這是一個很有用的屬性,通常我們需要動態(tài)的更換圖標時,我們就可以把這個unicode寫在標簽上,那怎么才能顯示呢?
css有一個超強的函數(shù)特性attr,在css里面我們可以動態(tài)的取到unicode的值
我們看下css代碼,注意unicode就是你標簽上的那個屬性
.maic-del {
&::before {
content: attr(unicode);
}
}
注意到沒有,利用attr這個特性就可以成功的加載到unicode了(不過注意,因為我這個是vue3項目,在vue2中,我們必須v-html渲染這整個標簽,不然圖標始終顯示不出來)
所以你會發(fā)現(xiàn)在css中你用attr這個屬性就可以動態(tài)的加載標簽上的unicode了
css的Attr
在以上我們的圖標用unicode就可以加載圖標,同時我們也知道利用css中的attr函數(shù)成功解決了圖標加載問題
我們看看attr這個屬性可以在我們項目中怎么用,在哪些場景可以用?
我們嘗試寫一個計數(shù)器
<div id="app">
<button id="startBtn">開始計數(shù)</button>
<div class="content" data-content="10"></div>
</div>
對應的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申明成全局,即可使用
看下布局后的基本頁面
我們再看下對應的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結合js實現(xiàn)了一個計數(shù)器功能,關于cssattr還有更多待挖掘的功能,在動態(tài)改變圖標等,attr是一種不錯的選擇方案
總結
加載阿里矢量圖標除了使用class與svg,我們也可以使用attr加載使用unicode
css3函數(shù)var,calc,attr的使用
使用css的attr特性簡單實現(xiàn)計數(shù)器的效果
本文示例code example[4]
參考資料
[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
作者:Maic
歡迎關注微信公眾號 :web技術學苑