theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨(component): 整理 vueUtil 工具, 常用插槽解析与类型判断

Browse Source
This commit is contained in:
就眠儀式 2022-11-23 04:43:46 +08:00
parent d97ad261f3
commit 753ef0fab2
4 changed files with 32 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package/component/src/component/dropdown/index.vue
View File

@ -20,7 +20,6 @@ import {
cloneVNode,
useAttrs,
StyleValue,
PropType,
} from "vue";
import {
computed,
@ -45,9 +44,8 @@ import {
DropdownContext,
} from "./interface";
import TeleportWrapper from "../_components/teleportWrapper.vue";
import { useFirstElement, isScrollElement, getScrollElements } from "./util";
import RenderFunction, { RenderFunc } from "../_components/renderFunction";
import { transformPlacement } from "./util";
import { useFirstElement, getScrollElements, transformPlacement } from "./util";
import RenderFunction from "../_components/renderFunction";
export type DropdownTrigger = "click" | "hover" | "focus" | "contextMenu";

36
package/component/src/component/dropdown/util.ts
View File

@ -1,27 +1,12 @@
import { DropdownPlacement } from "./interface";
import { Component, onMounted, onUpdated, ref, VNode, VNodeTypes } from "vue";
import { isArrayChildren, isComponent, isElement } from "src/utils";
export interface SlotChildren {
value?: VNode[];
}
// Quoted from arco-vue
// https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/_utils/vue-utils.ts
export enum ShapeFlags {
ELEMENT = 1,
FUNCTIONAL_COMPONENT = 1 << 1,
STATEFUL_COMPONENT = 1 << 2,
COMPONENT = ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT,
TEXT_CHILDREN = 1 << 3,
ARRAY_CHILDREN = 1 << 4,
SLOTS_CHILDREN = 1 << 5,
TELEPORT = 1 << 6,
SUSPENSE = 1 << 7,
COMPONENT_SHOULD_KEEP_ALIVE = 1 << 8,
COMPONENT_KEPT_ALIVE = 1 << 9,
}
export const isScrollElement = (element: HTMLElement) => {
return (
element.scrollHeight > element.offsetHeight ||
@ -41,24 +26,6 @@ export const getScrollElements = (container: HTMLElement | undefined) => {
return scrollElements;
};
export const isElement = (vn: VNode) => {
return Boolean(vn && vn.shapeFlag & ShapeFlags.ELEMENT);
};
export const isComponent = (
vn: VNode,
type?: VNodeTypes
): type is Component => {
return Boolean(vn && vn.shapeFlag & ShapeFlags.COMPONENT);
};
export const isArrayChildren = (
vn: VNode,
children: VNode["children"]
): children is VNode[] => {
return Boolean(vn && vn.shapeFlag & ShapeFlags.ARRAY_CHILDREN);
};
export const getChildrenArray = (vn: VNode): VNode[] | undefined => {
if (isArrayChildren(vn, vn.children)) {
return vn.children;
@ -140,6 +107,5 @@ export const transformPlacement = (
placementMap[separated[1]] || separated[1]
}` as DropdownPlacement;
}
return placement;
};

1
package/component/src/utils/index.ts
View File

@ -1,3 +1,4 @@
export * from "./domUtil";
export * from "./withInstall";
export * from "./arrayUtil";
export * from "./vueUtil";

27
package/component/src/utils/vueUtil.ts Normal file
View File

@ -0,0 +1,27 @@
import { Component, VNode, VNodeTypes } from "vue";
export enum ShapeFlags {
ELEMENT = 1,
FUNCTIONAL_COMPONENT = 1 << 1,
STATEFUL_COMPONENT = 1 << 2,
COMPONENT = ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT,
TEXT_CHILDREN = 1 << 3,
ARRAY_CHILDREN = 1 << 4,
SLOTS_CHILDREN = 1 << 5,
TELEPORT = 1 << 6,
SUSPENSE = 1 << 7,
COMPONENT_SHOULD_KEEP_ALIVE = 1 << 8,
COMPONENT_KEPT_ALIVE = 1 << 9,
}
export const isElement = (vn: VNode) => {
return Boolean(vn && vn.shapeFlag & ShapeFlags.ELEMENT);
};
export const isComponent = (vn: VNode, type?: VNodeTypes): type is Component => {
return Boolean(vn && vn.shapeFlag & ShapeFlags.COMPONENT);
};
export const isArrayChildren = (vn: VNode, children: VNode["children"]): children is VNode[] => {
return Boolean(vn && vn.shapeFlag & ShapeFlags.ARRAY_CHILDREN);
};