fix: 折叠面板，menu组件父子通信方法修改；子组件未引入问题修复

jd/generate-nutui.js

@@ -7,7 +7,7 @@ const packages = [];
 config.nav.map(item => {
   item.packages.forEach(element => {
     let { name, show } = element;
-    if (show) {
+    if (true) {
       importStr += `import ${name} from '/src/packages/${name.toLowerCase()}/index.vue';\n`;
       packages.push(name);
     }

package.json

@@ -108,4 +108,4 @@
     "type": "git",
     "url": "https://github.com/jdf2e/nutui.git"
   }
-}
+}

src/config.json

@@ -384,6 +384,15 @@
           "author": "vickyYE"
         },
         {
+          "name": "MenuItem",
+          "sort": 2,
+          "cName": "菜单组件",
+          "type": "component",
+          "show": false,
+          "desc": "下拉菜单组件",
+          "author": "vickyYE"
+        },
+        {
           "name": "Tabbar",
           "sort": 2,
           "cName": "标签栏组件",

src/packages/collapse/index.vue

@@ -4,10 +4,8 @@
   </view>
 </template>
 <script lang="ts">
-import { toRefs } from 'vue';
+import { toRefs, provide } from 'vue';
 import { createComponent } from '@/utils/create';
-import { useChildren } from '@/utils/useRelation/useChildren';
-export const COLLAPSE_KEY = 'nutCollapse';
 const { create } = createComponent('collapse');
 
 export default create({
@@ -96,8 +94,8 @@ export default create({
       }
     };
 
-    const { linkChildren } = useChildren(COLLAPSE_KEY);
-    linkChildren({
+    provide('collapseParent', {
+      children: [],
       value: props.active,
       accordion: props.accordion,
       expandIconPosition: props.expandIconPosition,

src/packages/collapseitem/index.vue

@@ -68,16 +68,17 @@
 <script lang="ts">
 import {
   reactive,
+  inject,
   toRefs,
   onMounted,
   ref,
   nextTick,
   computed,
-  watch
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance
 } from 'vue';
 import { createComponent } from '@/utils/create';
-import { useParent } from '@/utils/useRelation/useParent';
-import { COLLAPSE_KEY } from './../collapse/index.vue';
 const { create } = createComponent('collapse-item');
 
 export default create({
@@ -104,9 +105,14 @@ export default create({
     }
   },
   setup(props) {
-    const collapse = useParent(COLLAPSE_KEY);
-    const parent: any = reactive(collapse.parent as any);
-    const index: any = reactive(collapse.index as any);
+    const collapse: any = inject('collapseParent');
+    const parent: any = reactive(collapse);
+    const relation = (child: ComponentInternalInstance): void => {
+      if (child.proxy) {
+        parent.children.push(child.proxy);
+      }
+    };
+    relation(getCurrentInstance() as ComponentInternalInstance);
     const proxyData = reactive({
       openExpanded: false,
       classDirection: 'right',
@@ -120,8 +126,6 @@ export default create({
         transform: 'rotate(0deg)'
       }
     });
-    console.log(parent.titleIcon);
-
     const titleIconStyle = reactive({
       titleIcon: parent.titleIcon,
       titleIconPosition: parent.titleIconPosition,
@@ -193,8 +197,6 @@ export default create({
           }
         });
         nextTick(() => {
-          console.log(currentName.value);
-
           parent.changeVal(currentName.value, !proxyData.openExpanded);
           animation();
         });

src/packages/menu/index.vue

@@ -4,10 +4,8 @@
   </view>
 </template>
 <script lang="ts">
-import { toRefs, reactive } from 'vue';
+import { toRefs, reactive, provide } from 'vue';
 import { createComponent } from '@/utils/create';
-import { useChildren } from '@/utils/useRelation/useChildren';
-export const MENU_KEY = 'nutMenu';
 const { componentName, create } = createComponent('menu');
 
 export default create({
@@ -31,8 +29,7 @@ export default create({
     const handleMaskShow = status => {
       state.showMask = status;
     };
-    const { linkChildren } = useChildren(MENU_KEY);
-    linkChildren({
+    provide('menuRelation', {
       handleMaskShow,
       hasMask: props.hasMask
     });

src/packages/menuitem/index.vue

@@ -51,11 +51,11 @@ import {
   nextTick,
   computed,
   watch,
-  onUnmounted
+  onUnmounted,
+  provide,
+  inject
 } from 'vue';
 import { createComponent } from '@/utils/create';
-import { useParent } from '@/utils/useRelation/useParent';
-import { MENU_KEY } from './../menu/index.vue';
 import Icon from '@/packages/icon/index.vue';
 const { create } = createComponent('menu-item');
 
@@ -92,8 +92,8 @@ export default create({
   setup(props, { emit }) {
     const { menuList, multiStyle } = toRefs(props);
     const menuTitle = ref(props.title);
-    const menu = useParent(MENU_KEY);
-    const parent: any = reactive(menu.parent as any);
+    const menu = inject('menuRelation');
+    const parent: any = reactive(menu as any);
     const state = reactive({
       showPanel: false,
       currMenu: 0,

src/utils/useRelation/useChildren.ts

@@ -1,91 +0,0 @@
-import {
-  VNode,
-  isVNode,
-  provide,
-  reactive,
-  getCurrentInstance,
-  VNodeNormalizedChildren,
-  ComponentPublicInstance,
-  ComponentInternalInstance
-} from 'vue';
-
-export function flattenVNodes(children: VNodeNormalizedChildren) {
-  const result: VNode[] = [];
-
-  const traverse = (children: VNodeNormalizedChildren) => {
-    if (Array.isArray(children)) {
-      children.forEach(child => {
-        if (isVNode(child)) {
-          result.push(child);
-
-          if (child.component?.subTree) {
-            traverse(child.component.subTree.children);
-          }
-
-          if (child.children) {
-            traverse(child.children);
-          }
-        }
-      });
-    }
-  };
-
-  traverse(children);
-
-  return result;
-}
-
-export function sortChildren(
-  parent: ComponentInternalInstance,
-  publicChildren: ComponentPublicInstance[],
-  internalChildren: ComponentInternalInstance[]
-) {
-  const vnodes = flattenVNodes(parent.subTree.children);
-
-  internalChildren.sort(
-    (a, b) => vnodes.indexOf(a.vnode) - vnodes.indexOf(b.vnode)
-  );
-
-  const orderedPublicChildren = internalChildren.map(item => item.proxy!);
-
-  publicChildren.sort((a, b) => {
-    const indexA = orderedPublicChildren.indexOf(a);
-    const indexB = orderedPublicChildren.indexOf(b);
-    return indexA - indexB;
-  });
-}
-
-export function useChildren(key: string | symbol) {
-  const publicChildren: ComponentPublicInstance[] = reactive([]);
-  const internalChildren: ComponentInternalInstance[] = reactive([]);
-  const parent = getCurrentInstance()!;
-
-  const linkChildren = (value?: any) => {
-    const link = (child: ComponentInternalInstance) => {
-      if (child.proxy) {
-        internalChildren.push(child);
-        publicChildren.push(child.proxy);
-        sortChildren(parent, publicChildren, internalChildren);
-      }
-    };
-
-    const unlink = (child: ComponentInternalInstance) => {
-      const index = internalChildren.indexOf(child);
-      publicChildren.splice(index, 1);
-      internalChildren.splice(index, 1);
-    };
-
-    provide(key, {
-      link,
-      unlink,
-      children: publicChildren,
-      internalChildren,
-      ...value
-    });
-  };
-
-  return {
-    children: publicChildren,
-    linkChildren
-  };
-}

src/utils/useRelation/useParent.ts

@@ -1,42 +0,0 @@
-import {
-  inject,
-  computed,
-  onUnmounted,
-  getCurrentInstance,
-  ComponentPublicInstance,
-  ComponentInternalInstance
-} from 'vue';
-
-type ParentProvide<T> = T & {
-  link(child: ComponentInternalInstance): void;
-  unlink(child: ComponentInternalInstance): void;
-  children: ComponentPublicInstance[];
-  internalChildren: ComponentInternalInstance[];
-};
-
-export function useParent<T>(key: string | symbol) {
-  const parent = inject<ParentProvide<T> | null>(key, null);
-
-  if (parent) {
-    const instance = getCurrentInstance();
-
-    if (instance) {
-      const { link, unlink, internalChildren, ...rest } = parent;
-
-      link(instance);
-
-      onUnmounted(() => {
-        unlink(instance);
-      });
-
-      const index = computed(() => internalChildren.indexOf(instance));
-
-      return {
-        parent: rest,
-        index
-      };
-    }
-  }
-
-  return {};
-}

src/utils/useRelation/useRelation.ts

@@ -0,0 +1,7 @@
+import { getCurrentInstance } from 'vue';
+export function useExtend<T>(apis: T) {
+  const instance = getCurrentInstance();
+  if (instance) {
+    Object.assign(instance.proxy, apis);
+  }
+}