From ca877166a7e83cbd7c25f0a0fc1567e19c65ed13 Mon Sep 17 00:00:00 2001
From: xuanzai <43233731+MikuBlog@users.noreply.github.com>
Date: Mon, 10 Feb 2020 15:04:05 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BD=BF=E7=94=A8=E6=A0=85=E6=A0=BC=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=20(#75)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 可根据主题色动态改变菜单栏字体颜色

* 使用栅格布局
---
 src/views/components/icons/index.vue | 58 +++++++++++++++-------------
 1 file changed, 32 insertions(+), 26 deletions(-)

diff --git a/src/views/components/icons/index.vue b/src/views/components/icons/index.vue
index 3677afd..206175f 100644
--- a/src/views/components/icons/index.vue
+++ b/src/views/components/icons/index.vue
@@ -6,30 +6,34 @@
     </aside>
     <el-tabs type="border-card">
       <el-tab-pane label="Icons">
-        <div v-for="item of svgIcons" :key="item" @click="handleClipboard(generateIconCode(item),$event)">
-          <el-tooltip placement="top">
-            <div slot="content">
-              {{ generateIconCode(item) }}
-            </div>
-            <div class="icon-item">
-              <svg-icon :icon-class="item" class-name="disabled" />
-              <span>{{ item }}</span>
-            </div>
-          </el-tooltip>
-        </div>
+        <div class="grid">
+          <div v-for="item of svgIcons" :key="item" @click="handleClipboard(generateIconCode(item),$event)">
+            <el-tooltip placement="top">
+              <div slot="content">
+                {{ generateIconCode(item) }}
+              </div>
+              <div class="icon-item">
+                <svg-icon :icon-class="item" class-name="disabled" />
+                <span>{{ item }}</span>
+              </div>
+            </el-tooltip>
+          </div>
+         </div>
       </el-tab-pane>
       <el-tab-pane label="Element-UI Icons">
-        <div v-for="item of elementIcons" :key="item" @click="handleClipboard(generateElementIconCode(item),$event)">
-          <el-tooltip placement="top">
-            <div slot="content">
-              {{ generateElementIconCode(item) }}
-            </div>
-            <div class="icon-item">
-              <i :class="'el-icon-' + item" />
-              <span>{{ item }}</span>
-            </div>
-          </el-tooltip>
-        </div>
+        <div class="grid">
+          <div v-for="item of elementIcons" :key="item" @click="handleClipboard(generateElementIconCode(item),$event)">
+            <el-tooltip placement="top">
+              <div slot="content">
+                {{ generateElementIconCode(item) }}
+              </div>
+              <div class="icon-item">
+                <i :class="'el-icon-' + item" />
+                <span>{{ item }}</span>
+              </div>
+            </el-tooltip>
+          </div>
+         </div>
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -39,7 +43,6 @@
 import clipboard from '@/utils/clipboard'
 import svgIcons from './svg-icons'
 import elementIcons from './element-icons'
-
 export default {
   name: 'Icons',
   data() {
@@ -66,7 +69,12 @@ export default {
 .icons-container {
   margin: 10px 20px 0;
   overflow: hidden;
-
+  
+  .grid {
+    position: relative;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  }
   .icon-item {
     margin: 20px;
     height: 85px;
@@ -77,13 +85,11 @@ export default {
     color: #24292e;
     cursor: pointer;
   }
-
   span {
     display: block;
     font-size: 16px;
     margin-top: 10px;
   }
-
   .disabled {
     pointer-events: none;
   }