@elementplus-kit/uikit 1.4.0 → 1.5.0

package/components/search/src/index.tsx

@@ -1,4 +1,4 @@
-import { ref, defineComponent, onMounted, onUnmounted, nextTick } from "vue";
+import { ref, defineComponent, onMounted, onUnmounted, nextTick, watch } from "vue";
 
 import { CForm, CDrawer } from "@elementplus-kit/uikit";
 import { ArrowUpBold } from "@element-plus/icons-vue";
@@ -64,11 +64,7 @@ export default defineComponent({
     };
     // 点击元素外关闭
     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) => {
       // 如果下拉表单可见，且点击事件不在下拉表单内部
@@ -98,10 +94,9 @@ export default defineComponent({
     const showCount = ref(6); // 显示个数
     const simpleRef = ref<HTMLDivElement>(null);
     const simpleFormRef = ref<HTMLDivElement>(null);
+    const simpleFormContainerRef = ref<HTMLDivElement>(null);
     const simpleBtnRef = ref<HTMLDivElement>(null);
     const cFormRef = ref<HTMLDivElement>(null);
-    const calcFlg = ref(false); // 计算宽度后再显示表单
-    const childW = ref([]);
 
     // 设置节流
     let timer: any = null;
@@ -113,58 +108,72 @@ export default defineComponent({
         calcSunResize();
       }, 200);
     };
-
-    // 初次计算显示个数
-    const calcSunInit = () => {
-      if (simpleFormRef.value) {
+    // 计算显示个数
+    const calcSunResize = () => {
+      if (simpleFormContainerRef.value) {
         // 寻找cForm 先写死 后期做成动态寻找
-        const cFormDom = simpleFormRef.value.children[0];
-        const cFormW = cFormDom.offsetWidth;
+        const cFormDom = simpleFormContainerRef.value.children[0];
+        const cFormW = simpleFormRef.value.offsetWidth;
         // 收集子元素宽度并保存到数组中
-        const cW = [];
-        // const marginR = [];
-        Array.from(cFormDom.children).map((child) => {
+
+        let maxW = 0;
+        showCount.value = cFormDom?.children?.length;
+        Array.from(cFormDom.children).map((child, index) => {
+          child.style.display = "inline-flex"; // 行内布局时的默认值 如果表单换了默认值要动态变化 暂时不考虑
+          if (maxW > cFormW) {
+            child.style.display = "none";
+            return;
+          }
+
           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) {
+          const w = child.offsetWidth + mgValue;
+          maxW = maxW + w;
+          if (maxW > cFormW) {
+            child.style.display = "none";
             showCount.value = index;
-            return pre + cur;
+            maxW = 100000;
           }
-          return pre + cur;
-        }, 0);
+        });
       }
     };
-    // 变化时计算显示个数
-    const calcSunResize = () => {
-      if (simpleFormRef.value) {
-        // 寻找cForm 先写死 后期做成动态寻找
-        const cFormDom = simpleFormRef.value.children[0];
-        const cFormW = cFormDom.offsetWidth;
-        childW.value.reduce((pre, cur, index) => {
-          if (pre > cFormW) {
-            return 10000; // 终止累加
+    // 监听表单宽度变化
+    const formWidth = ref(0);
+    const jt = () => {
+      // 获取需要监听的元素
+      const targetElement = simpleFormRef.value.children[0];
+      // 创建 ResizeObserver 实例
+      const resizeObserver = new ResizeObserver((entries) => {
+        const clearW = 25; // input clear 按钮 22 按 25 算
+        for (const entry of entries) {
+          // 获取元素最新的宽度（contentBox 是内容区尺寸，也可改用 borderBox/devicePixelContentBox）
+          const newWidth = entry.contentRect.width;
+          // 变化了才执行
+          if (newWidth !== formWidth.value) {
+            if (formWidth.value === 0) {
+              // 初始化赋值
+              formWidth.value = newWidth;
+              searchResize();
+            } else if (newWidth < formWidth.value - clearW) {
+              // 过滤抖动
+              formWidth.value = newWidth;
+              searchResize();
+            } else if (newWidth > formWidth.value + clearW) {
+              // 过滤抖动
+              searchResize();
+              formWidth.value = newWidth;
+            }
           }
-          if (pre + cur > cFormW) {
-            showCount.value = index;
-            return pre + cur;
-          }
-          return pre + cur;
-        }, 0);
-      }
-    };
+        }
+      });
 
+      // 开始监听目标元素
+      resizeObserver.observe(targetElement);
+    };
     onMounted(() => {
-      // 初始化执行一次
-      calcSunInit();
+      // jt函数会触发一次初始化
+      jt();
       // 注册页面大小函数
       window.addEventListener("resize", searchResize);
     });
@@ -173,25 +182,26 @@ export default defineComponent({
       window.removeEventListener("resize", searchResize);
       document.removeEventListener("click", handleClickOutside); // 销毁点击事件
     });
+
     return () => {
       return (
         <div className="c-search">
-          <div
-            className="c-search-simple"
-            ref={simpleRef}
-          >
+          <div className="c-search-simple" ref={simpleRef}>
             <div className="c-search-simple-form" ref={simpleFormRef}>
-              <CForm
-                ref={(el) => (cFormRef.value = el)}
-                {...getEvent()}
-                inline
-                model={props.modelValue}
-                formOptions={props.formOptions?.filter(
-                  (item, index) => index < showCount.value
-                )}
+              <div
+                className="c-simple-form-container"
+                ref={simpleFormContainerRef}
               >
-                {getSlot()}
-              </CForm>
+                <CForm
+                  ref={(el) => (cFormRef.value = el)}
+                  {...getEvent()}
+                  inline
+                  model={props.modelValue}
+                  formOptions={props.formOptions}
+                >
+                  {getSlot()}
+                </CForm>
+              </div>
             </div>
             <div className="c-search-simple-btn" ref={simpleBtnRef}>
               {slots["btn-left"]?.()}

package/components/search/style/index.scss

@@ -16,6 +16,9 @@
     overflow: auto; // 开启滚动条
     // 滚动条宽度
     scrollbar-width: none; // 隐藏滚动条
+  }
+  .c-simple-form-container {
+    display: inline-block;
     > .c-form {
       white-space: nowrap; // 防止表单内容换行
     }

package/package.json

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