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

收工


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

查看所有标签

猜你喜欢:

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

人工智能

人工智能

腾讯研究院、中国信通院互联网法律研究中心、腾讯AI Lab、腾讯开放平台 / 中国人民大学出版社 / 2017-10-25 / 68.00元

面对科技的迅猛发展,中国政府制定了《新一代人工智能发展规划》,将人工智能上升到国家战略层面,并提出:不仅人工智能产业要成为新的经济增长点,而且要在2030年达到世界领先水平,让中国成为世界主要人工智能创新中心,为跻身创新型国家前列和经济强国奠定基础。 《人工智能》一书由腾讯一流团队与工信部高端智库倾力创作。本书从人工智能这一颠覆性技术的前世今生说起,对人工智能产业全貌、最新进展、发展趋势进行......一起来看看 《人工智能》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

SHA 加密
SHA 加密

SHA 加密工具

html转js在线工具
html转js在线工具

html转js在线工具