@elementplus-kit/uikit 1.1.0 → 1.2.0

package/components/search/src/index.tsx

@@ -94,9 +94,11 @@ export default defineComponent({
         }, 0);
       }
     };
-    
+
     const showCount = ref(6); // 显示个数
-    const searchRef = ref<HTMLDivElement>(null);
+    const simpleRef = ref<HTMLDivElement>(null);
+    const simpleFormRef = ref<HTMLDivElement>(null);
+    const simpleBtnRef = ref<HTMLDivElement>(null);
     const cFormRef = ref<HTMLDivElement>(null);
     const calcFlg = ref(false); // 计算宽度后再显示表单
     const childW = ref([]);
@@ -114,9 +116,9 @@ export default defineComponent({
 
     // 初次计算显示个数
     const calcSunInit = () => {
-      if (searchRef.value) {
+      if (simpleFormRef.value) {
         // 寻找cForm 先写死 后期做成动态寻找
-        const cFormDom = searchRef.value.children[0];
+        const cFormDom = simpleFormRef.value.children[0];
         const cFormW = cFormDom.offsetWidth;
         // 收集子元素宽度并保存到数组中
         const cW = [];
@@ -128,7 +130,7 @@ export default defineComponent({
           // marginR.push(mgValue);
           cW.push(child.offsetWidth + mgValue); // 把mg加上 mg 一般不会变 为了避免多次计算
         });
-        childW.value = cW;
+        childW.value = cW; // 储存子元素宽度
         childW.value.reduce((pre, cur, index) => {
           if (pre > cFormW) {
             return 10000; // 终止累加
@@ -139,19 +141,13 @@ export default defineComponent({
           }
           return pre + cur;
         }, 0);
-
-        // 得到结果后 显示表单
-        calcFlg.value = true;
-        // offsetWidth
-        // clientWidth
-        // classList
       }
     };
     // 变化时计算显示个数
     const calcSunResize = () => {
-      if (searchRef.value) {
+      if (simpleFormRef.value) {
         // 寻找cForm 先写死 后期做成动态寻找
-        const cFormDom = searchRef.value.children[0];
+        const cFormDom = simpleFormRef.value.children[0];
         const cFormW = cFormDom.offsetWidth;
         childW.value.reduce((pre, cur, index) => {
           if (pre > cFormW) {
@@ -182,9 +178,9 @@ export default defineComponent({
         <div className="c-search">
           <div
             className="c-search-simple"
-            style={calcFlg.value ? "" : "opacity: 0;"}
+            ref={simpleRef}
           >
-            <div className="c-search-simple-form" ref={searchRef}>
+            <div className="c-search-simple-form" ref={simpleFormRef}>
               <CForm
                 ref={(el) => (cFormRef.value = el)}
                 {...getEvent()}
@@ -197,13 +193,12 @@ export default defineComponent({
                 {getSlot()}
               </CForm>
             </div>
-            <div className="c-search-simple-btn">
+            <div className="c-search-simple-btn" ref={simpleBtnRef}>
               {slots["btn-left"]?.()}
               {showCount.value < props.formOptions?.length && (
                 <div
-                  className={`c-search-simple-icon ${
-                    showSearchForm.value ? "icon-rotate" : ""
-                  }`}
+                  className={`c-search-simple-icon ${showSearchForm.value ? "icon-rotate" : ""
+                    }`}
                   onClick={handleShow}
                 >
                   <el-icon className="el-icon c-search-icon">

package/components/search/style/index.scss

@@ -12,7 +12,13 @@
     justify-content: space-between;
   }
   .c-search-simple-form {
-    flex: 1;
+    flex: 1; // 占满剩余空间
+    overflow: auto; // 开启滚动条
+    // 滚动条宽度
+    scrollbar-width: none; // 隐藏滚动条
+    > .c-form {
+      white-space: nowrap; // 防止表单内容换行
+    }
   }
   .c-search-simple-btn {
     display: flex;

package/package.json

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