利用styleSheets快速生成一个图标库界面

栏目: CSS · 发布时间: 5年前

内容简介:需求: 实现一个图标库的选择界面,展示UI库中所有的图标并提供选择功能思路从

&01.需求

需求: 实现一个图标库的选择界面,展示UI库中所有的图标并提供选择功能

  • ICON库—— iview UI 共 860

利用styleSheets快速生成一个图标库界面

&02.实现思路

思路从 iview CSS 样式表中 提取所有的 .ivu-icon 的样式,并处理成数组 利用 v-for 实现循环渲染

基本知识参考-CSS操作

CSSStyleDeclaration.parentRule属性返回当前规则所属的那个样式块(CSSRule 实例)。如果不存在所属的样式块,该属性返回null。

var declaration = document.styleSheets[0].rules[0].style;
declaration.parentRule === document.styleSheets[0].rules[0]

&03.代码块

注意!!!

  • styleSheetscssRules 都是 Object 类型,其本身定义了一个 length 的键值;
  • length 外每个键值从0开始自增,所以在取值时以 styleSheets[0] 去取 ,并非数组的取值;
  • 还有一点要注意的是:在开发环境下,css未被打包时肯能会有多个styleSheets存在、而生产环境下css会默认被统一打成一份即只存在一个styleSheets

利用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>

收工


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

三位一体

三位一体

[美]迈克尔·马隆 / 黄亚昌 / 浙江人民出版社 / 2015-4 / 98.90

[内容简介] ●本书讲述了罗伯特•诺伊斯、戈登•摩尔和安德鲁•格鲁夫如何缔造了世界上最重要公司的故事。公司的“外交家”诺伊斯被视为圣父、“思想家”摩尔被视为圣灵、“行动家”格鲁夫被视为圣子,这个三位一体的组合创下了企业管理中的奇迹,开创了一个价值万亿美元的产业,将一家初创企业打造成为千亿美元量级的巨型公司。 ●本书作者迈克尔•马隆在接触空前数量的企业档案的基础上,揭示了英特尔公司无处不......一起来看看 《三位一体》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

SHA 加密
SHA 加密

SHA 加密工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具