@elementplus-kit/uikit 1.0.4 → 1.0.5

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,7 @@ export default defineComponent({
 
     // 渲染表单
     const renderForm = () => {
-      console.log('$attrs', $attrs);
+      console.log("$attrs", $attrs);
       return h(
         ElConfigProvider,
         {

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