利用styleSheets快速生成一個圖標庫界面

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

循環生成圖標

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

圖標的選擇功能 基於 vuex 狀態管理實現，選中狀態由curIcon的值決定每一個元素的class

<style scoped>
  .menu-icons-wrap{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    height: 40vh;
    width: 50vw;
    overflow: auto;
    font-size: 2em;
    padding: 1em;
    color: #000000;
  }
  .menu-icons-items{
      cursor: pointer;
      transition:all  0.2s ease-in-out;
      padding:5px ;
      text-align: center;
  }
  .menu-icons-items p{
    max-width: 5em;
    font-size: 0.8em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .menu-icons-items:hover{
    color: #ffffff;
    background-color: #2d8cf0;
    transform: scale(1.1);
  }
  .menu-icons-items-selected{
    color: #ffffff;
    background-color: #2d8cf0;
  }
</style>

收工