浏览代码

图标组件问题修复

zouzs 2 周之前
父节点
当前提交
26a2385629
共有 2 个文件被更改,包括 35 次插入13 次删除
  1. 32 10
      src/components/ReIcon/src/Select.vue
  2. 3 3
      src/views/system/menu/index.vue

+ 32 - 10
src/components/ReIcon/src/Select.vue

@@ -61,21 +61,37 @@ const iconItemStyle = computed((): ParameterCSSProperties => {
 });
 
 function setVal() {
-  currentActiveType.value = inputValue.value.substring(
-    0,
-    inputValue.value.indexOf(":") + 1
-  );
-  icon.value = inputValue.value.substring(inputValue.value.indexOf(":") + 1);
+  const v = inputValue.value as unknown as string;
+  if (!v || typeof v !== "string") {
+    icon.value = "";
+    return;
+  }
+  const sepIndex = v.indexOf(":");
+  if (sepIndex < 0) {
+    icon.value = "";
+    return;
+  }
+  currentActiveType.value = v.substring(0, sepIndex + 1);
+  icon.value = v.substring(sepIndex + 1);
 }
 
 function onBeforeEnter() {
-  if (isAllEmpty(icon.value)) return;
+  const v = inputValue.value as unknown as string;
+  if (!v || typeof v !== "string" || v.indexOf(":") < 0) {
+    // 空值或不符合在线格式时,显示默认搜索图标,并重置分页/选项卡
+    icon.value = "";
+    currentActiveType.value = tabsList[0].name; // 默认 Element Plus 图标集
+    currentPage.value = 1;
+    return;
+  }
   setVal();
   // 寻找当前图标在第几页
-  const curIconIndex = copyIconList[currentActiveType.value].findIndex(
-    i => i === icon.value
+  const list = copyIconList[currentActiveType.value] || [];
+  const curIconIndex = list.findIndex(i => i === icon.value);
+  currentPage.value = Math.max(
+    1,
+    Math.ceil((curIconIndex + 1) / pageSize.value)
   );
-  currentPage.value = Math.ceil((curIconIndex + 1) / pageSize.value);
 }
 
 function onAfterLeave() {
@@ -111,7 +127,13 @@ watch(
 );
 watch(
   () => inputValue.value,
-  val => val && setVal(),
+  val => {
+    if (val && typeof val === "string") return setVal();
+    // 当输入值为空时,清空内部状态以确保显示默认图标
+    icon.value = "";
+    currentActiveType.value = tabsList[0].name;
+    currentPage.value = 1;
+  },
   { immediate: true }
 );
 watch(

+ 3 - 3
src/views/system/menu/index.vue

@@ -288,7 +288,7 @@ const state = reactive<State>({
   isCreate: false,
   form: {
     component: null, // 组件路径
-    icon: null, // 菜单图标
+    icon: "", // 菜单图标
     isCache: "0", // 是否缓存 (0缓存 1不缓存)
     isFrame: "1", // 是否外链 (0是 1否)
     menuName: null, // 菜单名称
@@ -527,7 +527,7 @@ const columns: PlusColumn[] = [
 const handleCreate = (): void => {
   form.value = {
     component: null, // 组件路径
-    icon: null, // 菜单图标
+    icon: "", // 菜单图标
     isCache: "0", // 是否缓存 (0缓存 1不缓存)
     isFrame: "1", // 是否外链 (0是 1否)
     menuName: null, // 菜单名称
@@ -623,7 +623,7 @@ buttons.value = [
       console.log("新增", params);
       form.value = {
         component: null, // 组件路径
-        icon: null, // 菜单图标
+        icon: "", // 菜单图标
         isCache: "0", // 是否缓存 (0缓存 1不缓存)
         isFrame: "1", // 是否外链 (0是 1否)
         menuName: null, // 菜单名称