@elementplus-kit/uikit 1.0.4 → 1.1.0

package/components/button/src/index.ts

@@ -1,9 +1,16 @@
-import { defineComponent, h } from "vue";
-import { ElButton } from "element-plus";
+import { defineComponent, h, PropType } from "vue";
+import {
+  ElButton,
+  ElDropdown,
+  ElDropdownMenu,
+  ElDropdownItem,
+  buttonProps,
+} from "element-plus";
 
-// import '../style/index.scss';
+import "../style/index.scss";
 import { typeActiveMap } from "./constants.ts";
 import { has, isBoolean, isFunction, isArray } from "lodash-es";
+import { tr } from "element-plus/es/locales.mjs";
 export default defineComponent({
   props: {
     params: {
@@ -15,8 +22,8 @@ export default defineComponent({
       type: Array,
       default: () => [],
     },
-    // 权限函数
-    hasPermission: {
+    // 权限验证函数
+    permit: {
       type: Function,
     },
     size: {
@@ -35,6 +42,16 @@ export default defineComponent({
       type: Boolean,
       default: undefined,
     },
+    // 折叠
+    fold: {
+      type: Boolean,
+      default: false,
+    },
+    // 折叠数量
+    foldNum: {
+      type: Number,
+      default: 0,
+    },
     // // 权限函数
     // hasRole: {
     //   type: Function,
@@ -46,31 +63,27 @@ export default defineComponent({
     // console.log('slots', slots);
     // console.log('attrs', attrs);
 
-    // 解析属性
+    // 解析按钮属性
     const getAttrs = (item) => {
       let defaultAttrs = {
         size: props.size,
         plain: props.plain,
         text: props.text,
         link: props.link,
-        class: `c-alias-${item.alias || ""}`,
+        class: `c-btn-alias-${item.alias || ""}`,
       };
 
-      if (item?.alias && typeActiveMap[item.alias]) {
-        defaultAttrs = {
-          ...typeActiveMap[item.alias],
-          ...defaultAttrs,
-        };
-      }
+      // 默认按钮类型 用样式控制?
+      // if (item?.alias && typeActiveMap[item.alias]) {
+      //   defaultAttrs = {
+      //     ...typeActiveMap[item.alias],
+      //     ...defaultAttrs,
+      //   };
+      // }
 
       // 过滤掉非elbutton属性
-      const filterAttrsList = [
-        "label",
-        "alias",
-        "permission",
-        "vIf",
-        "disable",
-      ];
+      const filterAttrsList = ["label", "alias", "permit", "vIf", "disable"];
+
       Object.keys(item).map((key) => {
         if (!filterAttrsList.includes(key)) {
           defaultAttrs[key] = item[key];
@@ -81,30 +94,55 @@ export default defineComponent({
       if (isBoolean(item.disable)) {
         defaultAttrs.disabled = item.disable;
       }
-      if (isFunction(item.disable) && item.disable(props.params)) {
+      if (
+        isFunction(item.disable) &&
+        item.disable(props.params) !== undefined
+      ) {
         defaultAttrs.disabled = item.disable(props.params);
       }
       return defaultAttrs;
     };
-
-    const render = () => {
-      let list = [];
+    // 解析下拉菜单属性
+    const getDropdownAttrs = (item) => {
+      const obj = getAttrs(item);
+      const defaultAttrs = {
+        splitButton: true,
+      };
+      // 过滤下拉菜单属性
+      const l = [
+        "type",
+        "size",
+        "splitButton",
+        "disabled",
+        "placement",
+        "effect",
+        "trigger",
+      ];
+      l.forEach((key) => {
+        if (obj[key] !== undefined) {
+          defaultAttrs[key] = obj[key];
+        }
+      });
+      return defaultAttrs;
+    };
+    // 过滤权限与 vIf
+    const filterOptions = () => {
+      const list = [];
       // 过滤权限
       props.btnOptions.map((item) => {
         if (
-          isArray(item.permission) &&
-          item.permission.length > 0 &&
-          isFunction(props.hasPermission)
+          isArray(item.permit) &&
+          item.permit.length > 0 &&
+          isFunction(props.permit)
         ) {
-          if (props.hasPermission(item.permission)) {
+          if (props.permit(item.permit)) {
             list.push(item);
           }
         } else {
           list.push(item);
         }
       });
-
-      const listR = [];
+      const list2 = [];
       // 过滤 vIf
       list.map((item) => {
         if (
@@ -113,27 +151,113 @@ export default defineComponent({
           item.vIf(props.params) !== undefined
         ) {
           if (item.vIf(props.params)) {
-            listR.push(item);
+            list2.push(item);
           }
         } else {
-          listR.push(item);
+          list2.push(item);
         }
       });
+      return list2;
+    };
+    // 按钮单个生成函数
+    const createBtn = (item) => {
+      return h(
+        ElButton,
+        {
+          ...getAttrs(item),
+          onClick: () => {
+            emit("btnAction", item.alias, props.params);
+          },
+        },
+        {
+          default: () => item?.label,
+        }
+      );
+    };
+    // 下拉菜单生成函数
+    const createDropdown = (finalList) => {
+      const dropdownList = []; // 不折叠的按钮
+      const dropdownMain = []; // 下拉占位
+      const dropdownItemList = []; // 折叠的按钮
 
-      return listR.map((item) => {
-        return h(
-          ElButton,
+      finalList.map((itm, idx) => {
+        if (idx < props.foldNum) {
+          dropdownList.push(itm);
+        } else if (idx === props.foldNum) {
+          dropdownMain.push(itm);
+        } else {
+          dropdownItemList.push(itm);
+        }
+      });
+      // 处理只有一个下拉按钮的情况
+      if (dropdownMain.length > 0 && dropdownItemList.length === 0) {
+        dropdownList.push(dropdownMain[0]);
+      }
+
+      // 最终渲染的vdom
+      let renderVdom = [];
+      // 展示按钮vdom
+      const butsVdom = dropdownList.map((item) => {
+        return createBtn(item);
+      });
+
+      // 合并参数
+      if (butsVdom.length > 0) {
+        renderVdom = renderVdom.concat(butsVdom);
+      }
+
+      if (dropdownMain.length > 0 && dropdownItemList.length > 0) {
+        // 下拉菜单vdom
+        const dropdownVdom = h(
+          ElDropdown,
           {
-            ...getAttrs(item),
+            ...getDropdownAttrs(dropdownMain[0]),
+            class: "c-btn-dropdown",
+            buttonProps: getAttrs(dropdownMain[0]),
+            splitButton: true,
+            // splitButton: dropdownItemList.length > 0,
             onClick: () => {
-              emit("btnAction", item.alias, props.params);
+              emit("btnAction", dropdownMain[0].alias, props.params);
+            },
+            onCommand: (command: string) => {
+              emit("btnAction", command, props.params);
             },
           },
           {
-            default: () => item?.label,
+            default: () => {
+              return dropdownMain[0].label;
+            },
+            dropdown: () => {
+              return dropdownItemList.map((item) => {
+                return h(
+                  ElDropdownItem,
+                  {
+                    command: item.alias,
+                  },
+                  {
+                    default: () => item?.label,
+                  }
+                );
+              });
+            },
           }
         );
-      });
+        renderVdom = renderVdom.concat(dropdownVdom);
+      }
+      return renderVdom;
+    };
+
+    const render = () => {
+      const finalList = filterOptions(); // 最终列表
+      // 是否折叠 折叠
+      if (props.fold) {
+        return createDropdown(finalList);
+      } else {
+        // 不折叠
+        return finalList.map((item) => {
+          return createBtn(item);
+        });
+      }
     };
     return () => render();
   },

package/components/button/style/index.scss

@@ -0,0 +1,3 @@
+.el-button + .el-dropdown {
+  margin-left: 10px;
+}

package/components/form/src/index.ts

@@ -14,7 +14,7 @@ import zhCn from "element-plus/es/locale/lang/zh-cn";
 import CFormItem from "./FormItem.ts";
 import { has, isArray, isBoolean, isFunction, isNumber } from "lodash-es";
 import { getEmits } from "./constants"; // 获取所有的事件
-import '../style/index.scss'
+import "../style/index.scss";
 const propsAttrs = {
   // 表单数据
   model: { type: Object, default: () => ({}) },
@@ -60,7 +60,7 @@ export default defineComponent({
     });
 
     // 解构props
-    const { model, formOptions, readonly, gutter, col} = toRefs(props);
+    const { model, formOptions, readonly, gutter, col } = toRefs(props);
 
     // 暴露elForm组件上的方法
     const vm = getCurrentInstance(); // 获取虚拟DOM实例
@@ -105,18 +105,18 @@ export default defineComponent({
     // 渲染表单项
     const renderFormItem = () => {
       // 过滤权限
-      const list = []
+      const list = [];
       formOptions.value.map((item) => {
-        // 处理 vIf 显示隐藏
-        if(has(item, 'vIf')) {
-          if (isFunction(item.vIf) && item.vIf(props.model, props.params)) {
-            list.push(item)
+        // 处理 vIf true 显示 false 隐藏
+        if (isFunction(item?.vIf) && item.vIf(props.model, props.params) !== undefined) {
+          if (item.vIf(props.model, props.params)) {
+            list.push(item);
           }
         } else {
-          list.push(item)
+          list.push(item);
         }
-      })
-      return formOptions.value.map((item) => {
+      });
+      return list.map((item) => {
         // const { label, prop, type, required, col, formItem, attrs } = item
         // const { label, prop, type, required, col, formItem, attrs, ...args } = item
         const rFormItem = () => {
@@ -170,7 +170,6 @@ export default defineComponent({
 
     // 渲染表单
     const renderForm = () => {
-      console.log('$attrs', $attrs);
       return h(
         ElConfigProvider,
         {

package/components/search/src/index.tsx

@@ -1,35 +1,29 @@
-import {
-  ref,
-  computed,
-  defineComponent,
-} from "vue";
+import { ref, defineComponent, onMounted, onUnmounted, nextTick } from "vue";
 
 import { CForm, CDrawer } from "@elementplus-kit/uikit";
 import { ArrowUpBold } from "@element-plus/icons-vue";
-import '../style/index.scss';
+import "../style/index.scss";
 
 export default defineComponent({
   props: {
     modelValue: {
       type: Object,
-      default: {}
+      default: {},
     },
     formOptions: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     isDrawer: {
       type: Boolean,
-      default: false
+      default: false,
     },
   },
-  emits: ['update:modelValue', 'search', 'reset', 'close'],
+  emits: ["update:modelValue", "search", "reset", "close"],
 
   setup(props, { emit, slots, attrs, expose }) {
     // 自己的 slot
     const slotsList = ["active", "btn-left", "btn-right"];
-    // console.log('slots', slots);
-    // console.log('attrs', attrs);
     // 解析 attrs 中的事件
     const getEvent = () => {
       let formObj: any = {};
@@ -37,8 +31,8 @@ export default defineComponent({
         if (name.indexOf("on") === 0) {
           formObj[name] = attrs[name];
         }
-      })
-      return formObj
+      });
+      return formObj;
     };
 
     // 解析插槽
@@ -49,13 +43,14 @@ export default defineComponent({
           formObj[key] = slots[key];
         }
       });
-      return formObj
+      return formObj;
     };
 
     // 搜索
     const handleSearch = () => {
       emit("search");
       showSearchForm.value = false;
+      document.removeEventListener("click", handleClickOutside); // 销毁点击事件
     };
     // 重置
     const handleReset = () => {
@@ -64,65 +59,203 @@ export default defineComponent({
     // 关闭
     const handleClose = () => {
       showSearchForm.value = false;
+      document.removeEventListener("click", handleClickOutside); // 销毁点击事件
       emit("close");
     };
+    // 点击元素外关闭
+    const dropdownRef = ref<HTMLElement | null>(null); // 下拉表单的 ref
+    // 判断点击事件是否在 targetElement 外部
+    const isClickOutside = (event, targetElement) => {
+      console.log("🚀 ~ isClickOutside ~ targetElement:", targetElement);
+      return !targetElement.contains(event.target);
+    };
+    // 点击外部关闭函数
+    const handleClickOutside = (event: MouseEvent) => {
+      // 如果下拉表单可见，且点击事件不在下拉表单内部
+      if (
+        showSearchForm.value &&
+        dropdownRef.value &&
+        !dropdownRef.value?.$el?.contains(event.target)
+      ) {
+        showSearchForm.value = false; // 关闭下拉表单
+        document.removeEventListener("click", handleClickOutside); // 销毁点击事件
+      }
+    };
+    // 显示隐藏折叠搜索表单
+    const showSearchForm = ref(false);
+    const handleShow = () => {
+      if (showSearchForm.value) {
+        showSearchForm.value = false;
+        document.removeEventListener("click", handleClickOutside); // 销毁点击事件
+      } else {
+        showSearchForm.value = true;
+        setTimeout(() => {
+          document.addEventListener("click", handleClickOutside); // 注册点击事件
+        }, 0);
+      }
+    };
+    
+    const showCount = ref(6); // 显示个数
+    const searchRef = ref<HTMLDivElement>(null);
+    const cFormRef = ref<HTMLDivElement>(null);
+    const calcFlg = ref(false); // 计算宽度后再显示表单
+    const childW = ref([]);
 
-    const showCountC = computed(() => {
-      return props.showCount;
-    });
+    // 设置节流
+    let timer: any = null;
+    const searchResize = () => {
+      if (timer) {
+        clearTimeout(timer);
+      }
+      timer = setTimeout(() => {
+        calcSunResize();
+      }, 200);
+    };
 
-    const showCount = ref(3); // 显示个数
-    const showSearchForm = ref(false); // 显示搜索表单
-    const handleShow = () => {
-      showSearchForm.value = !showSearchForm.value;
+    // 初次计算显示个数
+    const calcSunInit = () => {
+      if (searchRef.value) {
+        // 寻找cForm 先写死 后期做成动态寻找
+        const cFormDom = searchRef.value.children[0];
+        const cFormW = cFormDom.offsetWidth;
+        // 收集子元素宽度并保存到数组中
+        const cW = [];
+        // const marginR = [];
+        Array.from(cFormDom.children).map((child) => {
+          const computedStyles = window.getComputedStyle(child); // 获取元素 css 样式
+          const mg = computedStyles.marginRight; // 获取元素 margin-right 样式值 有单位
+          const mgValue = parseFloat(mg); // 转换为数值
+          // marginR.push(mgValue);
+          cW.push(child.offsetWidth + mgValue); // 把mg加上 mg 一般不会变 为了避免多次计算
+        });
+        childW.value = cW;
+        childW.value.reduce((pre, cur, index) => {
+          if (pre > cFormW) {
+            return 10000; // 终止累加
+          }
+          if (pre + cur > cFormW) {
+            showCount.value = index;
+            return pre + cur;
+          }
+          return pre + cur;
+        }, 0);
+
+        // 得到结果后 显示表单
+        calcFlg.value = true;
+        // offsetWidth
+        // clientWidth
+        // classList
+      }
     };
-    return () => (
-      <div className="c-search">
-        <div className="c-search-simple">
-          <div className="c-search-simple-form">
-            <CForm
-              {...getEvent()}
-              inline
-              model={props.modelValue}
-              formOptions={props.formOptions?.filter(
-                (item, index) => index < showCount.value
+    // 变化时计算显示个数
+    const calcSunResize = () => {
+      if (searchRef.value) {
+        // 寻找cForm 先写死 后期做成动态寻找
+        const cFormDom = searchRef.value.children[0];
+        const cFormW = cFormDom.offsetWidth;
+        childW.value.reduce((pre, cur, index) => {
+          if (pre > cFormW) {
+            return 10000; // 终止累加
+          }
+          if (pre + cur > cFormW) {
+            showCount.value = index;
+            return pre + cur;
+          }
+          return pre + cur;
+        }, 0);
+      }
+    };
+
+    onMounted(() => {
+      // 初始化执行一次
+      calcSunInit();
+      // 注册页面大小函数
+      window.addEventListener("resize", searchResize);
+    });
+    // 销毁
+    onUnmounted(() => {
+      window.removeEventListener("resize", searchResize);
+      document.removeEventListener("click", handleClickOutside); // 销毁点击事件
+    });
+    return () => {
+      return (
+        <div className="c-search">
+          <div
+            className="c-search-simple"
+            style={calcFlg.value ? "" : "opacity: 0;"}
+          >
+            <div className="c-search-simple-form" ref={searchRef}>
+              <CForm
+                ref={(el) => (cFormRef.value = el)}
+                {...getEvent()}
+                inline
+                model={props.modelValue}
+                formOptions={props.formOptions?.filter(
+                  (item, index) => index < showCount.value
+                )}
+              >
+                {getSlot()}
+              </CForm>
+            </div>
+            <div className="c-search-simple-btn">
+              {slots["btn-left"]?.()}
+              {showCount.value < props.formOptions?.length && (
+                <div
+                  className={`c-search-simple-icon ${
+                    showSearchForm.value ? "icon-rotate" : ""
+                  }`}
+                  onClick={handleShow}
+                >
+                  <el-icon className="el-icon c-search-icon">
+                    <ArrowUpBold />
+                  </el-icon>
+                </div>
               )}
-              ref="formRef"
-            >
-              {getSlot()}
-            </CForm>
+              <el-button type="primary" onClick={handleSearch}>
+                搜索
+              </el-button>
+              <el-button type="primary" onClick={handleReset}>
+                重置
+              </el-button>
+              {slots["btn-right"]?.()}
+            </div>
           </div>
-          <div className="c-search-simple-btn">
-            {slots["btn-left"]?.()}
-            {showCount.value < props.formOptions?.length && (
-              <div
-                className={
-                  `c-search-simple-icon ${showSearchForm.value ? "icon-rotate" : ""}`
-                }
-                onClick={handleShow}
+
+          {/* 下拉悬浮 */}
+          {!props.isDrawer && showSearchForm.value && (
+            <transition name="search-form-transition">
+              <el-card
+                ref={dropdownRef}
+                className="c-search-form el-card is-always-shadow"
               >
-                <el-icon className="el-icon c-search-icon">
-                  <ArrowUpBold />
-                </el-icon>
-              </div>
-            )}
-            <el-button type="primary" onClick={handleSearch}>
-              搜索
-            </el-button>
-            <el-button type="primary" onClick={handleReset}>
-              重置
-            </el-button>
-            {slots["btn-right"]?.()}
-          </div>
-        </div>
+                <CForm
+                  {...getEvent()}
+                  inline
+                  model={props.modelValue}
+                  formOptions={props.formOptions.filter(
+                    (item, index) => index >= showCount.value
+                  )}
+                  ref="formRef"
+                >
+                  {getSlot()}
+                </CForm>
+                <div style="text-align: right;">
+                  <el-button type="primary" onClick={handleSearch}>
+                    搜索
+                  </el-button>
+                  <el-button type="primary" onClick={handleClose}>
+                    关闭
+                  </el-button>
+                </div>
+              </el-card>
+            </transition>
+          )}
 
-        {/* 下拉悬浮 */}
-        {!props.isDrawer && showSearchForm.value && (
-          <transition name="search-form-transition">
-            <el-card className="c-search-form el-card is-always-shadow">
+          {props.isDrawer && (
+            <CDrawer title="搜索" v-model={showSearchForm.value} size="660px">
               <CForm
                 {...getEvent()}
-                inline
+                col={12}
                 model={props.modelValue}
                 formOptions={props.formOptions.filter(
                   (item, index) => index >= showCount.value
@@ -139,34 +272,10 @@ export default defineComponent({
                   关闭
                 </el-button>
               </div>
-            </el-card>
-          </transition>
-        )}
-
-        {props.isDrawer && (
-          <CDrawer title="搜索" v-model={showSearchForm.value} size="660px">
-            <CForm
-              {...getEvent()}
-              col={12}
-              model={props.modelValue}
-              formOptions={props.formOptions.filter(
-                (item, index) => index >= showCount.value
-              )}
-              ref="formRef"
-            >
-              {getSlot()}
-            </CForm>
-            <div style="text-align: right;">
-              <el-button type="primary" onClick={handleSearch}>
-                搜索
-              </el-button>
-              <el-button type="primary" onClick={handleClose}>
-                关闭
-              </el-button>
-            </div>
-          </CDrawer>
-        )}
-      </div>
-    )
+            </CDrawer>
+          )}
+        </div>
+      );
+    };
   },
-})
+});

package/components/search/style/index.scss

@@ -11,7 +11,9 @@
     display: flex;
     justify-content: space-between;
   }
-
+  .c-search-simple-form {
+    flex: 1;
+  }
   .c-search-simple-btn {
     display: flex;
     margin-left: auto;

package/components/table/src/index.ts

@@ -132,11 +132,11 @@ export default defineComponent({
       const rColumn = (columns, list) => {
         columns.map((item) => {
           const { children, ...p } = item;
-          // 处理 vIf
+          // 处理 vIf true 显示 false 隐藏
           if (
             isFunction(item.vIf) &&
             item.vIf(props.params) !== undefined &&
-            item.vIf(props.params)
+            !item.vIf(props.params)
           ) {
             return;
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementplus-kit/uikit",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "",
   "main": "./components/index.ts",
   "peerDependencies": {

package/components/search/src/index-/346/272/220.vue

@@ -1,256 +0,0 @@
-<template>
-  <div class="c-search">
-    <div class="c-search-simple">
-      <div class="c-search-simple-form">
-        <c-form v-bind="getEvent(), getSlot('form')" inline :model="formData"
-          :formOptions="props.formOptions.filter((item, index) => index < showCount)" ref="formRef">
-          <template #[`c-search-button`]>
-            <slot name="active"></slot>
-          </template>
-        </c-form>
-      </div>
-      <div class="c-search-simple-btn">
-        <slot name="btn-left" />
-        <div class="c-search-simple-icon" @click="handleShow" v-if="showCount < props.formOptions.length"
-          :class="{ 'icon-rotate': showSearchForm }">
-          <el-icon class="c-search-icon">
-            <ArrowUpBold />
-          </el-icon>
-        </div>
-        <el-button type="primary" @click="handleSearch">搜索</el-button>
-        <el-button type="primary" @click="handleReset">重置</el-button>
-        <slot name="btn-right" />
-      </div>
-    </div>
-    <!-- 下拉悬浮 -->
-    <transition name="search-form-transition">
-      <el-card class="c-search-form" v-if="showSearchForm && props.isDrawer">
-        <c-form v-bind="getEvent(), getSlot('form')"" inline :model="formData"
-          :formOptions="props.formOptions.filter((item, index) => index >= showCount)" ref="formRef">
-        </c-form>
-        <div style="text-align: right;">
-          <el-button type="primary" @click="handleSearch">搜索</el-button>
-          <el-button type="primary" @click="handleClose">关闭</el-button>
-        </div>
-      </el-card>
-    </transition>
-    <c-drawer v-if="!props.isDrawer" title="搜索" v-model="showSearchForm" size="660px">
-      <c-form v-bind="getEvent(), getSlot('form')" :col="12" :model="formData"
-        :formOptions="props.formOptions.filter((item, index) => index >= showCount)" ref="formRef">
-      </c-form>
-      <div style="text-align: right;">
-        <el-button type="primary" @click="handleSearch">搜索</el-button>
-        <el-button type="primary" @click="handleClose">关闭</el-button>
-      </div>
-    </c-drawer>
-  </div>
-</template>
-<script setup lang="ts">
-import { ref, computed, useAttrs, useSlots, defineModel } from 'vue'
-import { CForm, CDrawer } from '@elementplus-kit/uikit'
-import { ArrowUpBold } from '@element-plus/icons-vue'
-const props = defineProps({
-  formOptions: {
-    type: Array,
-    default: () => []
-  },
-  formItemButton: {
-    type: Object,
-    default: () => ({
-      label: '',
-      prop: 'c-button',
-    })
-  },
-  isDrawer: {
-    type: Boolean,
-    default: true
-  },
-  showCount: { // 显示简洁栏的个数
-    type: Number,
-    default: 3
-  }
-})
-const emit = defineEmits(['search', 'reset', 'close'])
-
-const formData = defineModel()
-const attr = useAttrs()
-const slots = useSlots()
-
-// 自己的 slot 
-const slotsMap = ['active']
-// 解析 attr 中的事件
-const getEvent = (name: string) => {
-  let obj = {}
-  Object.keys(attr).forEach(key => {
-    if (key.startsWith('on')) {
-      obj[key] = attr[key]
-    }
-  })
-  return obj
-}
-
-// 解析插槽 
-const getSlot = (type: 'form' | 'search') => {
-  let searchObj: any = {}
-  let formObj: any = {}
-  Object.keys(slots).forEach(key => {
-    if (slotsMap.includes(key)) {
-      searchObj[key] = slots[key]
-    } else {
-      formObj[key] = slots[key]
-    }
-  })
-  return type === 'search' ? formObj : searchObj
-}
-
-const handleSearch = () => {
-  emit('search')
-  showSearchForm.value = false
-}
-
-const handleReset = () => {
-  emit('reset')
-}
-
-const handleClose = () => {
-  showSearchForm.value = false
-  emit('close')
-}
-const showCountC = computed(() => {
-  return props.showCount
-})
-
-const showCount = ref(3) // 显示个数
-const showSearchForm = ref(false) // 显示搜索表单
-const handleShow = () => {
-  showSearchForm.value = !showSearchForm.value
-}
-
-// const formOptionsSimple = computed(() => {
-//   // 取3为简洁栏
-//   const l = props.formOptions?.slice(0, 3)
-//   l.push(props.formItemButton)
-//   formOptionsHidden.value = props.formOptions?.slice(3)
-//   return l
-// })
-
-// // const formOptionsSimple = ref([]) // 简洁栏
-// // const formOptionsHidden = ref([]) // 隐藏栏
-
-// 窗口大小变化时，调整搜索表单的宽度
-// const handleResize = () => {
-//   if (window.innerWidth <= 768) {
-//     formOptions.value.forEach(item => {
-//       item.col = {
-//         span: 24
-//       }
-//     })
-//   } else {
-//     formOptions.value.forEach(item => {
-//       item.col = {
-//         span: 8
-//       }
-//     })
-//   }
-// }
-// window.addEventListener('resize', handleResize)
-</script>
-<style scoped lang="scss">
-.search-btn {
-  margin-right: 20px;
-  margin-left: auto;
-}
-
-.c-search {
-  position: relative;
-  height: 50px;
-
-  .c-search-simple {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .c-search-simple-btn {
-    display: flex;
-    margin-left: auto;
-  }
-
-  .c-search-simple-icon {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    height: 32px;
-    width: 32px;
-    margin-right: 10px;
-    border-radius: 4px;
-    background-color: #409eff;
-    transition: all 0.2s;
-
-    &:hover {
-      background-color: rgb(121, 187, 255);
-    }
-
-    &:active {
-      background-color: rgb(51, 126, 204);
-    }
-  }
-
-  .c-search-icon {
-    // 添加鼠标悬停效果
-    display: inline-block;
-    color: #fff;
-    transition: all 0.2s;
-
-  }
-
-  .icon-rotate {
-    background-color: rgb(51, 126, 204);
-
-    .c-search-icon {
-      transform: rotate(180deg);
-    }
-  }
-
-  .c-search-form {
-    width: 100%;
-    position: absolute;
-    top: 50px;
-    left: 0;
-    overflow: hidden;
-    z-index: 10;
-    background-color: #fff;
-  }
-}
-
-/* 下拉动画效果 */
-.search-form-transition {
-
-  &-enter-active,
-  &-leave-active {
-    transition: all 0.3s ease;
-    /* 动画过渡时间和缓动函数 */
-    overflow: hidden;
-    max-height: 500px;
-    /* 确保足够大的最大高度以容纳内容 */
-  }
-
-  &-enter-from {
-    max-height: 0;
-    /* 入场开始时高度为0 */
-    opacity: 0;
-    /* 可以添加透明度效果增强视觉体验 */
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-
-  &-leave-to {
-    max-height: 0;
-    /* 出场结束时高度为0 */
-    opacity: 0;
-    /* 可以添加透明度效果增强视觉体验 */
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-}
-</style>