chore(loading): 修复eslint问题 (DevCloudFE#392)

Author: jxhhdx

packages/devui-vue/devui/loading/src/directive.ts

@@ -107,7 +107,7 @@ const handleProps = (el: TargetHTMLElement, vprops: LoadingProps) => {
  el.style.position = props.positionType!
  el.options = props
  el.instance = loadingInstance
- el.mask = loadingInstance.proxy.$el
+ el.mask = loadingInstance?.proxy?.$el
 }
 
 const loadingDirective = {

packages/devui-vue/devui/loading/src/service.ts

@@ -1,55 +1,63 @@
-/* eslint-disable */
-import { defineComponent } from 'vue'
-import { createComponent } from '../../shared/scripts/component'
-import Loading from './loading'
+import type { CSSProperties, VNode, ComponentInternalInstance } from 'vue';
+import { defineComponent } from 'vue';
+import { createComponent } from '../../shared/scripts/component';
+import Loading from './loading';
 
-import { LoadingProps } from './types'
+import { LoadingProps } from './types';
 
-const loadingConstructor = defineComponent(Loading)
+const loadingConstructor = defineComponent(Loading);
 
 interface TargetElement extends Element {
- style ?: any
+ style?: CSSProperties;
 }
 
-const cacheTarget = new WeakMap()
+type IMargeVNodeComponent = VNode['component'] & {
+ loadingInstance?: ComponentInternalInstance['proxy'];
+} | null;
+
+const cacheTarget = new WeakMap();
 
 const loading = {
- open(options: LoadingProps = {}) {
+ open(options: LoadingProps = {}): IMargeVNodeComponent {
 
- const parent: TargetElement = options.target || document.body
+ const parent: TargetElement = options.target || document.body;
 
  if (cacheTarget.has(parent)) {
- return cacheTarget.get(parent)
+ return cacheTarget.get(parent);
+ }
+ if (parent.style) {
+ parent.style.position = options.positionType;
  }
 
- parent.style.position = options.positionType
-
- const isFull = document.body === parent
+ const isFull = document.body === parent;
 
- options = {...new LoadingProps(), ...options}
+ options = { ...new LoadingProps(), ...options };
 
- const instance = createComponent(loadingConstructor, {
+ const instance: IMargeVNodeComponent = createComponent(loadingConstructor, {
  ...options,
  isFull
- }, options.loadingTemplateRef ? () => options.loadingTemplateRef : null)
-
- cacheTarget.set(parent, instance)
-
- instance.proxy.open()
- parent.appendChild(instance.proxy.$el)
-
- const close = instance.proxy.close
- instance.loadingInstance = instance.proxy
- instance.loadingInstance.close = (...args: any[]) => {
- cacheTarget.delete(parent)
- // 1. 箭头函数内部并没有内置arguments对象 @mrundef-210810
- // 2. 如果没有上下文要求`apply(null)`，不必使用apply/call
- // close.apply(null, arguments)
- close(...args)
+ }, options.loadingTemplateRef ? () => options.loadingTemplateRef : null);
+
+ cacheTarget.set(parent, instance);
+
+ instance?.proxy?.open();
+ parent.appendChild(instance?.proxy?.$el);
+
+ const close = instance?.proxy?.close;
+ if (instance) {
+ instance.loadingInstance = instance?.proxy;
+ if (instance.loadingInstance) {
+ instance.loadingInstance.close = (...args: unknown[]) => {
+ cacheTarget.delete(parent);
+ // 1. 箭头函数内部并没有内置arguments对象 @mrundef-210810
+ // 2. 如果没有上下文要求`apply(null)`，不必使用apply/call
+ // close.apply(null, arguments)
+ close?.(...args);
+ };
+ }
  }
-
- return instance
+ return instance;
  }
-}
+};
 
-export default loading
+export default loading;

packages/devui-vue/devui/loading/src/types.ts

@@ -1,6 +1,7 @@
+import type { CSSProperties } from 'vue';
 import { ExtractPropTypes, PropType, VNode } from 'vue';
 
-type PositionType = 'static' | 'relative' | 'absolute' | 'fixed' |'sticky';
+type PositionType = CSSProperties['position'];
 
 export interface LoadingType {
  value: Promise<unknown> | Array<Promise<unknown>> | undefined;
@@ -30,7 +31,7 @@ export const componentProps = {
 export class LoadingProps {
  target?: Element | null;
  message?: string;
- loadingTemplateRef?: unknown;
+ loadingTemplateRef?: VNode['component'];
  backdrop?: boolean = true;
  positionType?: PositionType = 'relative';
  view?: View = new View();
@@ -41,6 +42,6 @@ export type ComponentProps = ExtractPropTypes<typeof componentProps>;
 
 export interface TargetHTMLElement extends HTMLElement {
  mask?: HTMLElement;
- instance?: VNode | unknown;
+ instance?: VNode['component'];
  options?: LoadingProps;
 }

packages/devui-vue/devui/shared/scripts/component.ts

@@ -1,14 +1,17 @@
+import type { VNode } from 'vue';
 import { h, render } from 'vue';
 
 const COMPONENT_CONTAINER_SYMBOL = Symbol('dev_component_container');
-
+type IMargeVNode = {
+ [COMPONENT_CONTAINER_SYMBOL]?: HTMLDivElement;
+} & VNode;
 /**
  * 创建组件实例对象
  * 返回的实例和调用 getCurrentComponent() 返回的一致
  * @param {*} Component
  */
-export function createComponent(Component: any, props: any, children: any = null) {
- const vnode: any = h(Component, { ...props }, children);
+export function createComponent(component: any, props: any, children: any = null): VNode['component'] {
+ const vnode: IMargeVNode = h(component, { ...props }, children);
  const container = document.createElement('div');
  vnode[COMPONENT_CONTAINER_SYMBOL] = container;
  render(vnode, container);
@@ -19,6 +22,6 @@ export function createComponent(Component: any, props: any, children: any = null
  * 销毁组件实例对象
  * @param {*} ComponnetInstance 通过createComponent方法得到的组件实例对象
  */
-export function unmountComponent(ComponnetInstance: any) {
+export function unmountComponent(ComponnetInstance: any): void {
  render(null, ComponnetInstance?.vnode[COMPONENT_CONTAINER_SYMBOL]);
 }