图标工具

src/views/Icons.vue

@@ -1,80 +0,0 @@
-<script setup>
-import { INSTALL_ICONS } from '@/icons'
-import chunk from 'lodash/chunk'
-import { computed, ref } from 'vue'
-import { useClipboard } from '@vueuse/core'
-import { ElMessage } from 'element-plus'
-
-const colSize = ref(8)
-const showSize = ref(200)
-const keyWords = ref('')
-const filterIcons = computed(() => {
-  let icons = INSTALL_ICONS
-  if (keyWords.value) {
-    icons = icons.filter(icon => icon.toLowerCase().includes(keyWords.value.toLowerCase()))
-  }
-  return chunk(icons.slice(0, showSize.value), colSize.value)
-})
-
-const copyIcon = (icon) => {
-  const { copy, isSupported } = useClipboard()
-  if (isSupported) {
-    copy(icon)
-    ElMessage({
-      message: `Copied: ${icon}`,
-      type: 'success'
-    })
-  } else {
-    ElMessage({
-      message: `Copy Not supported: ${icon}`,
-      type: 'error'
-    })
-  }
-}
-
-</script>
-
-<template>
-  <div>
-    <el-row>
-      <el-col>
-        <el-form label-width="120px">
-          <el-form-item label="图标名字">
-            <el-input
-              v-model="keyWords"
-              :placeholder="`输入关键字搜索图标，只显示前${showSize}个图标`"
-            />
-          </el-form-item>
-        </el-form>
-      </el-col>
-    </el-row>
-    <el-row
-      v-for="(icons, chunkIdx) in filterIcons"
-      :key="chunkIdx"
-    >
-      <el-col
-        v-for="icon in icons"
-        :key="icon"
-        :span="24/colSize"
-        class="text-center"
-      >
-        <a
-          class="el-button el-button--large is-text"
-          style="height:80px;"
-          @click="copyIcon(icon)"
-        >
-          <div>
-            <common-icon
-              size="20"
-              :icon="icon"
-            />
-          </div>
-        </a>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<style scoped>
-
-</style>

src/views/tools/Forms.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+  <div>
+    <strong>表单测试</strong>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/views/tools/Icons.vue

@@ -0,0 +1,92 @@
+<script setup>
+import { INSTALL_ICONS } from '@/icons'
+import chunk from 'lodash/chunk'
+import { computed, ref } from 'vue'
+import { useClipboard } from '@vueuse/core'
+import { ElMessage } from 'element-plus'
+
+const colSize = ref(8)
+const keyWords = ref('')
+const filterIcons = computed(() => {
+  let installIcons = INSTALL_ICONS
+  if (keyWords.value) {
+    installIcons = installIcons.filter(icon => icon.toLowerCase().includes(keyWords.value.toLowerCase()))
+  }
+  return chunk(installIcons, colSize.value).map((arr, idx) => {
+    return {
+      id: idx,
+      icons: arr
+    }
+  })
+})
+
+const copyIcon = (icon) => {
+  const { copy, isSupported } = useClipboard()
+  if (isSupported) {
+    copy(icon)
+    ElMessage({
+      message: `Copied: ${icon}`,
+      type: 'success'
+    })
+  } else {
+    ElMessage({
+      message: `Copy Not supported: ${icon}`,
+      type: 'error'
+    })
+  }
+}
+
+</script>
+
+<template>
+  <div>
+    <el-row>
+      <el-col>
+        <el-form label-width="120px">
+          <el-form-item label="图标名字">
+            <el-input
+              v-model="keyWords"
+              :placeholder="`输入关键字搜索图标`"
+            />
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+    <RecycleScroller
+      v-slot="{ item }"
+      page-mode
+      class="scroller"
+      :items="filterIcons"
+      :item-size="80"
+      key-field="id"
+    >
+      <el-row>
+        <el-col
+          v-for="icon in item.icons"
+          :key="icon"
+          :span="24/colSize"
+          class="text-center"
+        >
+          <a
+            class="el-button el-button--large is-text"
+            style="height:80px;"
+            @click="copyIcon(icon)"
+          >
+            <div>
+              <common-icon
+                size="20"
+                :icon="icon"
+              />
+            </div>
+          </a>
+        </el-col>
+      </el-row>
+    </RecycleScroller>
+  </div>
+</template>
+
+<style scoped>
+.scroller {
+  height: 100%;
+}
+</style>

src/views/tools/Tables.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+  <div>
+    <strong>表格测试</strong>
+  </div>
+</template>
+
+<style scoped>
+
+</style>