内容简介：需求： 实现一个图标库的选择界面，展示UI库中所有的图标并提供选择功能思路从
&01.需求
需求： 实现一个图标库的选择界面，展示UI库中所有的图标并提供选择功能
- ICON库——
iviewUI 共 860 个
&02.实现思路
思路从 iview CSS 样式表中 提取所有的 .ivu-icon 的样式，并处理成数组 利用 v-for 实现循环渲染
CSSStyleDeclaration.parentRule属性返回当前规则所属的那个样式块（CSSRule 实例）。如果不存在所属的样式块，该属性返回null。
var declaration = document.styleSheets[0].rules[0].style; declaration.parentRule === document.styleSheets[0].rules[0]
&03.代码块
注意！！！
- styleSheets 、 cssRules 都是
Object类型，其本身定义了一个length的键值; - 除
length外每个键值从0开始自增，所以在取值时以 styleSheets[0] 去取 ，并非数组的取值； - 还有一点要注意的是：在开发环境下，css未被打包时肯能会有多个styleSheets存在、而生产环境下css会默认被统一打成一份即只存在一个styleSheets
/**
* 提取ICON
*/
getIconsArr () {
let data = [];
let docSheets = document.styleSheets||[];
for ( let sheets of docSheets ) {
if(sheets.cssRules.length!==0){
for (let index in sheets.cssRules) {
let reStr = sheets.cssRules[index].selectorText||sheets.cssRules[index].cssText;
if(reStr!=undefined&&reStr.startsWith('.ivu-icon-')){
data.push(reStr.split('::')[0].slice(10,reStr.split('::')[0].length)) ;
}
}
}
}
// 数组去重
let set = new Set(data);
this.icons = new Array(...set);
}
循环生成图标
<Icon :type="ico" size="large"></Icon> 语法基于 iview UI库用法
<h1>共 {{icons.length||0}} 个图标</h1>
<section class="menu-icons-wrap">
<div v-for="(ico,index) in icons" :key="'ico_'+index"
@click="$store.commit('iconClick',ico)"
class="menu-icons-items"
:class="{'menu-icons-items-selected':curIcon==ico}">
<Icon :type="ico" size="large"></Icon>
<span>{{ico}}</span>
</div>
</section>
收工
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
