fix: 修复search无法自定义按钮的bug

#128
fast-crud · Dec 9, 2022 · e265f9b · e265f9b
1 parent 693a8cd
commit e265f9b
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 28 deletions.
diff --git a/packages/fast-admin/fs-admin-naive-ui b/packages/fast-admin/fs-admin-naive-ui
diff --git a/packages/fast-crud/src/components/basic/fs-button.tsx b/packages/fast-crud/src/components/basic/fs-button.tsx
@@ -19,7 +19,7 @@ export default defineComponent({
     /**
      * 图标
      */
-    icon: { type: String, default: "", required: false },
+    icon: { type: [String, Object], default: "", required: false },
     /**
      * 右边的图标
      */
@@ -31,10 +31,17 @@ export default defineComponent({
   },
   render() {
     const { ui } = useUi();
-    const icon: string | null | undefined = this.icon;
+    const icon: string | null | undefined | object = this.icon;
     const iconRight: string | null | undefined = this.iconRight;
     const iconRender = () => {
-      return <fs-icon icon={icon} />;
+      if (icon == null) {
+        return;
+      }
+      if (typeof icon === "string") {
+        return <fs-icon icon={icon} />;
+      } else {
+        return <fs-icon {...icon} />;
+      }
     };
     const isIconSlot = ui.type !== "element";
     const isIconProp = ui.type === "element";

diff --git a/packages/fast-crud/src/components/basic/fs-icon.tsx b/packages/fast-crud/src/components/basic/fs-icon.tsx
@@ -16,7 +16,7 @@ export default defineComponent({
       require: true
     }
   },
-  setup(props) {
+  setup(props, ctx) {
     const { ui } = useUi();
     const computedRenderFunc = computed(() => {
       if (props.icon && props.icon?.indexOf(":") >= 0) {
@@ -26,34 +26,34 @@ export default defineComponent({
           return () => {
             //@ts-ignore
             const name = props.icon.replace("svg:", "");
-            return <IconComp icon={name} />;
+            return <IconComp icon={name} {...ctx.attrs} />;
           };
         }
 
         const IconComp: any = resolveDynamicComponent("FsIconify");
         //如果是iconify图标
         return () => {
-          return <IconComp icon={props.icon} />;
+          return <IconComp icon={props.icon} {...ctx.attrs} />;
         };
       }
       //使用ui内置图标
       if (ui.icon.isComponent) {
         const IconComp: any = resolveDynamicComponent(props.icon);
         return () => {
-          return <IconComp />;
+          return <IconComp {...ctx.attrs} />;
         };
       } else {
         const IconComp: any = resolveDynamicComponent(props.icon);
         return () => {
           return (
-            <el-icon>
+            <el-icon {...ctx.attrs}>
               <IconComp />
             </el-icon>
           );
         };
       }
       return () => {
-        return <i class={props.icon} />;
+        return <i class={props.icon} {...ctx.attrs} />;
       };
     });
     //render icon

diff --git a/packages/fast-crud/src/components/basic/fs-iconify.vue b/packages/fast-crud/src/components/basic/fs-iconify.vue
@@ -2,6 +2,7 @@
   <span ref="iconifyRef" class="fs-iconify" :class="{ 'fs-iconify-spin': spin }"></span>
 </template>
 <script lang="ts">
+import _ from "lodash-es";
 import { defineComponent, nextTick, onMounted, ref, unref, watch } from "vue";
 /**
  * iconify 按需加载图标组件
@@ -24,9 +25,8 @@ export default defineComponent({
       default: false
     }
   },
-  setup(props) {
+  setup(props, ctx) {
     const iconifyRef = ref(null);
-
     const update = async () => {
       if (!props.icon) return;
 
@@ -50,9 +50,9 @@ export default defineComponent({
 });
 </script>
 <style lang="less">
-.fs-iconify {
-  display: inline-block;
-  vertical-align: middle;
+span.fs-iconify {
+  display: inline-flex !important;
+  align-items: center;
   &-spin {
     svg {
       animation: fsLoadingCircle 1s infinite linear;

diff --git a/packages/fast-crud/src/components/search/index.vue b/packages/fast-crud/src/components/search/index.vue
@@ -333,33 +333,32 @@ export default {
 
     const computedButtons = computed(() => {
       const btns = [];
-      const defBtnOptions = { search: {}, reset: {} };
-      _.merge(defBtnOptions, props.buttons);
-      if (defBtnOptions.search) {
-        btns.push({
+      const defBtnOptions = {
+        search: {
           show: true,
           type: "primary",
           disabled: false,
           click: () => {
             doSearch();
           },
           order: 1,
-          text: t("fs.search.search.text"), // '查询',
-          ...defBtnOptions.search
-        });
-      }
-      if (defBtnOptions.reset) {
-        btns.push({
+          text: t("fs.search.search.text") // '查询',
+        },
+        reset: {
           show: true,
           disabled: false,
           click: () => {
             doReset();
           },
           text: t("fs.search.reset.text"), // '重置',
-          order: 2,
-          ...defBtnOptions.reset
-        });
+          order: 2
+        }
+      };
+      _.merge(defBtnOptions, props.buttons);
+      for (let key in defBtnOptions) {
+        btns.push(defBtnOptions[key]);
       }
+
       btns.sort((a, b) => {
         return a.order - b.order;
       });