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

bbbbbb 发布于2019-08-30 15:55 / 484人阅读

摘要：需求需求实现一个图标库的选择界面，展示库中所有的图标并提供选择功能库共个实现思路思路从样式表中提取所有的的样式，并处理成数组利用实现循环渲染基本知识参考操作属性返回当前规则所属的那个样式块实例。

&01.需求

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

ICON库——iview UI 共 860 个

&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.代码块

注意！！！

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);
}

循环生成图标

语法基于 iview UI库用法

共 {{icons.length||0}} 个图标

    
        
        {{ico}}

图标的选择功能基于 vuex 状态管理实现，选中状态由curIcon的值决定每个元素的class

收工

超融合服务器私有云 bootstrap图标利用图标库免费图标库图标字体库

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117319.html

支付宝小程序之连接后端+详谈引入阿里icon图标

摘要：背景第一天练习支付宝小程序的时候写好了一个简单的页面后续是新增重置按钮连接后端接口然后加入图标网上看了很多小程序加图标例子说实话没有单独能成功的我也不记得结合了多少个才成功了还是自己写了篇文章记录下引入流程可能有点啰嗦但是比较详细连接后端接背景:第一天练习支付宝小程序的时候写好了一个简单的页面.后续是新增重置按钮,连接后端接口.然后加入icon图标.网上看了很多小程序加icon图标例...

biaoxiaoduan 2019-08-30 15:44 评论0 收藏0
使用compass自动合并css雪碧图(css sprite)

摘要：使用雪碧图，能够减少页面的请求数降低图片占用的字节，以此来达到提升页面访问速度的目的。也正是因为这一点，导致很多开发者懒于使用雪碧图。本文就介绍下怎样使用来自动合并雪碧图。生成的每个雪碧图默认的规则是目录名图片名。 css雪碧图又叫css精灵或css sprite，是一种背景图片的拼合技术。使用css雪碧图，能够减少页面的请求数、降低图片占用的字节，以此来达到提升页面访问速度的目的。但...

刘永祥 2019-08-28 18:06 评论0 收藏0
React Native 开发小Tips

摘要：除此之外，部分页面，其实完全可以由网页去支持多端共用的功能，楼主亲身遇到过的场景，就是图表的绘制，我们的方案是一个页面，需要微信，手机网页，和都具备该功能，而且我们手机网页和客户端打开的稍微有区别，需要隐藏。 showImg(https://segmentfault.com/img/bVzxDW); 相信好多写React Native的都是前端出身，当然遇见问题的，也很多时候会想从前端...

kevin 2019-08-21 10:55 评论0 收藏0
React Native 开发小Tips

摘要：除此之外，部分页面，其实完全可以由网页去支持多端共用的功能，楼主亲身遇到过的场景，就是图表的绘制，我们的方案是一个页面，需要微信，手机网页，和都具备该功能，而且我们手机网页和客户端打开的稍微有区别，需要隐藏。 showImg(https://segmentfault.com/img/bVzxDW); 相信好多写React Native的都是前端出身，当然遇见问题的，也很多时候会想从前端...

pakolagij 2019-06-25 15:31 评论0 收藏0
web前端——美化效果总结

摘要：概述项目开发过程中使用到了不少前端美化效果的方法，总结一下图片作为背景要实现的效果是，任意一张图片，不需要调整图片尺寸，图片完全填充网页背景。概述项目开发过程中使用到了不少web前端美化效果的方法，总结一下 1 图片作为背景要实现的效果是，任意一张图片img-page-background.png，不需要调整图片尺寸，图片完全填充网页背景。首先需在CSS代码中创建.page-bg...

awkj 2019-08-01 17:28 评论0 收藏0