.menu-icons-wrap{display:flex;弹性方向：行；证明内容：空格之间；弹性包装：包装；位置：相对；高度：40vh；宽度：50vw；溢出：自动；字体大小：2em；填充：1em；颜色：#000000；缓入缓出；填充：5px;文本对齐：居中；}.menu-icons-itemsp{最大宽度：5em；字体大小：0.8em；空白：nowrap；溢出：隐藏；文本溢出：省略号；}.menu-icons-items:hover{颜色：#ffffff;背景色：#2d8cf0；变换：比例（1.1）；}.menu-icons-items-selected{颜色：#ffffff;背景色：#2d8cf0；}&01。需求：实现一个图标库选择界面，显示UI库中的所有图标并提供选择功能图标库——iviewUI860total&02.实现思路是从iviewCSS样式表中提取所有.ivu-icon样式，处理成数组。使用v-for实现循环渲染。如果没有关联的样式块，则此属性返回null。vardeclaration=document.styleSheets[0].rules[0].style;declaration.parentRule===document.styleSheets[0].rules[0]&03.代码块注意！！！styleSheets和cssRules都是Object类型，它们自己定义了一个长度为key的值；除了length，每个key值都是从0开始递增，所以styleSheets[0]是用来取值的，不是数组的值；另外需要注意的是，在开发环境中，css不打包的时候可能会有多个styleSheets，但是在生产环境中，css会默认统一为一个，即只有一个styleSheets/***提取ICON*/getIconsArr(){letdata=[];让docSheets=document.styleSheets||[];for(letsheetsofdocSheets){if(sheets.cssRules.length!==0){for(letindexinsheets.cssRules){letreStr=sheets.cssRules[index].selectorText||sheets.cssRules[index].css文本；if(reStr!=undefined&&reStr.startsWith('.ivu-icon-')){data.push(reStr.split('::')[0].slice(10,reStr.split('::')[0].长度));}}}}//数组去重letset=newSet(data);this.icons=newArray(...set);}循环生成图标语法基于iviewUI库使用

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