图标选择控件

src/views/HomeView.vue

@@ -26,7 +26,10 @@ const showLeftMenu = computed(() => {
       <el-header>
         <top-nav />
       </el-header>
-      <el-header v-if="tabsViewStore.isTabMode">
+      <el-header
+        v-if="tabsViewStore.isTabMode"
+        class="tabs-header"
+      >
         <common-tabs-view />
       </el-header>
       <el-main>
@@ -51,3 +54,9 @@ const showLeftMenu = computed(() => {
     </el-container>
   </el-container>
 </template>
+<style scoped>
+.tabs-header {
+  margin-top: 5px;
+  height: 40px
+}
+</style>

src/views/tools/Forms.vue

@@ -95,6 +95,13 @@ const formOptions = [{
       value: 'unknown'
     }
   ]
+}, {
+  label: '图标测试',
+  prop: 'icon',
+  value: '',
+  type: 'icon-select',
+  required: true,
+  common: true
 }, {
   label: '地址',
   prop: 'address',

src/views/tools/Icons.vue

@@ -1,23 +1,14 @@
 <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'
+import { filterIconsByKeywords } from '@/services/icon/IconService'
 
 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
-    }
-  })
+  return filterIconsByKeywords(keyWords.value, colSize.value)
 })
 
 const copyIcon = (icon) => {
@@ -39,54 +30,55 @@ const copyIcon = (icon) => {
 </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)"
+  <el-container
+    class="icon-container"
+  >
+    <el-header height="40px">
+      <el-form label-width="120px">
+        <el-form-item :label="$t('common.label.keywords')">
+          <el-input
+            v-model="keyWords"
+            :placeholder="$t('common.msg.inputKeywords')"
+          />
+        </el-form-item>
+      </el-form>
+    </el-header>
+    <el-main>
+      <RecycleScroller
+        v-slot="{ item }"
+        class="scroller icon-list"
+        :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"
           >
-            <div>
-              <common-icon
-                size="20"
-                :icon="icon"
-              />
-            </div>
-          </a>
-        </el-col>
-      </el-row>
-    </RecycleScroller>
-  </div>
+            <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>
+    </el-main>
+  </el-container>
 </template>
 
 <style scoped>
-.scroller {
+.scroller, .icon-container  {
   height: 100%;
 }
 </style>

src/views/tools/Tables.vue

@@ -3,18 +3,21 @@ import { ref } from 'vue'
 
 const tableData = [
   {
+    id: '1',
     birthday: '2016-05-03',
     userName: 'Tom',
     gender: 'male',
     address: 'No. 189, Grove St, Los Angeles'
   },
   {
+    id: '2',
     birthday: '2016-05-02',
     userName: 'Tom',
     gender: 'female',
     address: 'No. 189, Grove St, Los Angeles'
   },
   {
+    id: '3',
     birthday: '2016-05-04',
     userName: 'Tom',
     gender: 'male',
@@ -54,12 +57,18 @@ const buttons = ref([{
   type: 'primary',
   click: item => {
     console.info('编辑=============', item)
+  },
+  buttonIf (item) {
+    return !!item.id
   }
 }, {
   labelKey: 'common.label.delete',
   type: 'danger',
   click: item => {
     console.info('删除=============', item)
+  },
+  buttonIf (item) {
+    return !!item.id
   }
 }, {
   label: '其他操作'

src/views/tools/TestPage.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { ref } from 'vue'
+
+const modelIcon = ref('Apple')
+</script>
+
+<template>
+  <el-container>
+    <el-main>
+      <el-form>
+        <el-form-item label="图标选择">
+          <common-icon-select v-model="modelIcon" />
+        </el-form-item>
+      </el-form>
+    </el-main>
+  </el-container>
+</template>
+
+<style scoped>
+
+</style>