内容简介:需求: 实现一个图标库的选择界面,展示UI库中所有的图标并提供选择功能思路从
&01.需求
需求: 实现一个图标库的选择界面,展示UI库中所有的图标并提供选择功能
- ICON库——
iview
UI 共 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>
收工
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 3 万免费 svg 图标大集合!可自由组合生成各种字体和 CSS,开箱即用!发布 1.0
- 超3万 SVG图标大集合!开箱即用,添加桌面版本,可简单生成字体,PNG/JPG/ICO
- c# – 如何将两个图标合并在一起? (在另一个图标上叠加一个图标)
- Bootstrap 图标集 v1.2.0 发布 —— 喜提 CSS 图标字体!
- Bootstrap 图标集 v1.2.0 发布 —— 喜提 CSS 图标字体!
- 9012年了你还在用单色图标?(iconfont多色图标详解)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。