@elementplus-kit/uikit 1.1.0 → 1.3.0

package/components/form/src/FormItem.ts

@@ -50,6 +50,7 @@ const propsAttrs = {
   options: { type: Array, default: () => [] },
   // 字典选项
   optionsRef: { type: Object, default: () => {} },
+  params: { type: Object, default: () => {} },
 };
 
 export default defineComponent({
@@ -107,7 +108,7 @@ export default defineComponent({
     const getDisabled = () => {
       let disabled = false;
       if (isFunction(attrs.value?.disabled)) {
-        disabled = attrs.value.disabled(model.value);
+        disabled = attrs.value.disabled({formData: model.value, params: props.params});
       }
       if (isBoolean(attrs.value?.disabled)) { // 在 attrs 后面结构, 也要处理直接赋值的情况，不然会覆盖
         disabled = attrs.value.disabled;
@@ -186,7 +187,6 @@ export default defineComponent({
             return options?.value?.map((item) => {
               return h(ElOption, {
                 ...item,
-                // disabled: isFunction(item.disabled) ? item.disabled(model.value) : item.disabled,
                 label: item.label,
                 value: item.value,
                 key: item.value,

package/components/form/src/index.ts

@@ -108,8 +108,8 @@ export default defineComponent({
       const list = [];
       formOptions.value.map((item) => {
         // 处理 vIf true 显示 false 隐藏
-        if (isFunction(item?.vIf) && item.vIf(props.model, props.params) !== undefined) {
-          if (item.vIf(props.model, props.params)) {
+        if (isFunction(item?.vIf) && item.vIf({formData: model.value, params: props.params}) !== undefined) {
+          if (item.vIf({formData: model.value, params: props.params})) {
             list.push(item);
           }
         } else {
@@ -124,6 +124,7 @@ export default defineComponent({
             class: "c-form-itme",
             model: model.value,
             allReadonly,
+            params: props.params,
             ...item,
             optionsRef: optionsRef.value,
           });

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.3.0",
   "description": "",
   "main": "./components/index.ts",
   "peerDependencies": {