修复 src 结构

src/component/iconPicker/index.vue

@@ -0,0 +1,196 @@
+<template>
+  <lay-dropdown ref="dropdownRef">
+    <div
+      class="layui-inline layui-border-box layui-iconpicker layui-iconpicker-split"
+    >
+      <div class="layui-inline layui-iconpicker-main">
+        <i class="layui-inline layui-icon" :class="[selectedIcon]"></i>
+      </div>
+      <span class="layui-inline layui-iconpicker-suffix"
+        ><i class="layui-icon layui-icon-down layui-anim"></i
+      ></span>
+    </div>
+    <template #content>
+      <div class="layui-iconpicker-view layui-iconpicker-scroll">
+        <div v-if="showSearch" class="layui-iconpicker-search">
+          <div class="layui-form layui-input-wrap layui-input-wrap-prefix">
+            <div class="layui-input-prefix">
+              <i class="layui-icon layui-icon-search"></i>
+            </div>
+            <input
+              type="text"
+              value=""
+              placeholder="search"
+              autocomplete="off"
+              class="layui-input"
+              lay-affix="clear"
+              @input="search"
+            />
+            <div class="layui-input-suffix layui-input-affix-event layui-hide">
+              <i class="layui-icon layui-icon-clear"></i>
+            </div>
+          </div>
+        </div>
+        <div class="layui-iconpicker-list">
+          <ul>
+            <li
+              v-for="icon in icones"
+              :key="icon"
+              :class="[selectedIcon === icon.class ? 'layui-this' : '']"
+              @click="selectIcon(icon.class)"
+            >
+              <i class="layui-icon" :class="[icon.class]"></i>
+              <p class="layui-elip">
+                {{ icon.name }}
+              </p>
+            </li>
+          </ul>
+        </div>
+        <div v-if="page" class="layui-iconpicker-page">
+          <div
+            id="layui-laypage-1"
+            class="layui-box layui-laypage layui-laypage-default"
+          >
+            <span class="layui-laypage-count">共 {{ total }} 个</span
+            ><a
+              href="javascript:;"
+              class="layui-laypage-prev"
+              :class="[currentPage === 1 ? 'layui-disabled' : '']"
+              @click="prev()"
+              ><i class="layui-icon layui-icon-left"></i></a
+            ><span class="layui-laypage-curr"
+              ><em class="layui-laypage-em"></em
+              ><em>{{ currentPage }} / {{ totalPage }}</em></span
+            ><span class="layui-laypage-spr">…</span
+            ><a href="javascript:;" class="layui-laypage-last" title="尾页"
+              >14</a
+            ><a
+              href="javascript:;"
+              :class="[currentPage === totalPage ? 'layui-disabled' : '']"
+              class="layui-laypage-next"
+              @click="next()"
+              ><i class="layui-icon layui-icon-right"></i
+            ></a>
+          </div>
+        </div>
+      </div>
+    </template>
+  </lay-dropdown>
+</template>
+
+<script setup name="LayIconPicker" lang="ts">
+import { defineProps, Ref, ref } from "vue";
+import { LayIconList as icons } from "@layui/icons-vue";
+
+export interface LayIconPickerProps {
+  page?: boolean;
+  modelValue?: string;
+  showSearch?: boolean;
+}
+
+const props = withDefaults(defineProps<LayIconPickerProps>(), {
+  modelValue: "layui-icon-face-smile",
+  page: false,
+});
+
+const dropdownRef = ref<null | HTMLElement>(null);
+
+const emit = defineEmits(["update:modelValue"]);
+
+const selectedIcon: Ref<string> = ref(props.modelValue as string);
+
+const selectIcon = function (icon: string) {
+  emit("update:modelValue", icon);
+  selectedIcon.value = icon;
+  // @ts-ignore
+  dropdownRef.value.hide();
+};
+
+const icones: Ref = ref([]);
+
+const total = ref(icons.length);
+const totalPage = ref(total.value / 12);
+const currentPage: Ref = ref(1);
+
+if (props.page) {
+  icones.value = icons.slice(0, 12);
+} else {
+  icones.value = icons;
+}
+
+const next = function () {
+  if (currentPage.value === totalPage.value) {
+    return;
+  }
+  currentPage.value = currentPage.value + 1;
+  const start = (currentPage.value - 1) * 12;
+  const end = start + 12;
+  icones.value = icons.slice(start, end);
+};
+
+const prev = function () {
+  if (currentPage.value === 1) {
+    return;
+  }
+  currentPage.value = currentPage.value - 1;
+  const start = (currentPage.value - 1) * 12;
+  const end = start + 12;
+  icones.value = icons.slice(start, end);
+};
+
+const search = function (e: any) {
+  var text = e.target.value;
+  currentPage.value = 1;
+  const start = (currentPage.value - 1) * 12;
+  const end = start + 12;
+  if (text === "") {
+    if (props.page) {
+      icones.value = icons.slice(start, end);
+      total.value = icons.length;
+      totalPage.value = Math.ceil(icons.length / 12);
+    } else {
+      icones.value = icons;
+    }
+  } else {
+    if (props.page) {
+      icones.value = searchList(text, icons).slice(start, end);
+      total.value = searchList(text, icons).length;
+      totalPage.value = Math.ceil(searchList(text, icons).length / 12);
+    } else {
+      icones.value = searchList(text, icons);
+    }
+  }
+};
+
+const searchList = function (str: string, container: any) {
+  var newList = [];
+  var startChar = str.charAt(0);
+  var strLen = str.length;
+  for (var i = 0; i < container.length; i++) {
+    var obj = container[i];
+    var isMatch = false;
+    for (var p in obj) {
+      if (typeof obj[p] == "function") {
+        obj[p]();
+      } else {
+        var curItem = "";
+        if (obj[p] != null) {
+          curItem = obj[p];
+        }
+        for (var j = 0; j < curItem.length; j++) {
+          if (curItem.charAt(j) == startChar) {
+            if (curItem.substring(j).substring(0, strLen) == str) {
+              isMatch = true;
+              break;
+            }
+          }
+        }
+      }
+    }
+    if (isMatch) {
+      newList.push(obj);
+    }
+  }
+  return newList;
+};
+</script>