fix: 修复image-preview的eslint问题、代码规范格式

DevCloudFE · Apr 2, 2022 · 70487bb · 70487bb
1 parent 8d8d820
commit 70487bb
Show file tree

Hide file tree

Showing 7 changed files with 141 additions and 113 deletions.
diff --git a/packages/devui-vue/devui/image-preview/__tests__/image-preview.spec.ts b/packages/devui-vue/devui/image-preview/__tests__/image-preview.spec.ts
@@ -32,7 +32,7 @@ describe('image-preview', () => {
  await img.trigger('click');
  const ele = document.querySelector('.devui-image-preview-main-image');
  expect(ele).toBeTruthy();
- const closeBtn = document.querySelector('.devui-image-preview-close-btn') as any;
+ const closeBtn = document.querySelector('.devui-image-preview-close-btn') as HTMLElement;
  closeBtn.click();
  });
 
@@ -56,7 +56,7 @@ describe('image-preview', () => {
  });
 
  it('image-preview custom', async () => {
- const custom: any = ref({});
+ const custom = ref({open: () => true});
  const open = () => custom.value.open();
  const wrapper = mount(
  {
@@ -81,7 +81,7 @@ describe('image-preview', () => {
  await customBtn.trigger('click');
  const ele = document.querySelector('.devui-image-preview-main-image');
  expect(ele).toBeTruthy();
- const closeBtn = document.querySelector('.devui-image-preview-close-btn') as any;
+ const closeBtn = document.querySelector('.devui-image-preview-close-btn') as HTMLElement;
  closeBtn.click();
  });
 });
diff --git a/packages/devui-vue/devui/image-preview/src/image-preview-directive.ts b/packages/devui-vue/devui/image-preview/src/image-preview-directive.ts
@@ -11,25 +11,17 @@ function mountedPreviewImages(props: ImagePreviewProps): void {
  url: props.url,
  previewUrlList: props.previewUrlList,
  zIndex: props.zIndex,
- backDropZIndex: props.backDropZIndex
+ backDropZIndex: props.backDropZIndex,
  });
 }
 function unmountedPreviewImages() {
  ImagePreviewService.close();
 }
 
 function getImgByEl(el: HTMLElement): Array<string> {
- const urlList = [...el.querySelectorAll('img')].map((item: HTMLImageElement) =>
- item.getAttribute('src')
- );
+ const urlList = [...el.querySelectorAll('img')].map((item: HTMLImageElement) => item.getAttribute('src'));
  return urlList;
 }
-function handleImgByEl(el: PreviewHTMLElement) {
- el.addEventListener('click', handleImg);
-}
-function removeHandle(el: PreviewHTMLElement) {
- el.removeEventListener('click', handleImg);
-}
 function handleImg(e: MouseEvent) {
  e.stopPropagation();
  const el = e.currentTarget as PreviewHTMLElement;
@@ -41,12 +33,18 @@ function handleImg(e: MouseEvent) {
  url,
  previewUrlList: urlList,
  zIndex: el?.zIndex,
- backDropZIndex: el?.backDropZIndex
+ backDropZIndex: el?.backDropZIndex,
  });
  }
 }
+function handleImgByEl(el: PreviewHTMLElement) {
+ el.addEventListener('click', handleImg);
+}
+function removeHandle(el: PreviewHTMLElement) {
+ el.removeEventListener('click', handleImg);
+}
 export default {
- mounted(el: PreviewHTMLElement, binding: BindingTypes | undefined) {
+ mounted(el: PreviewHTMLElement, binding: BindingTypes | undefined): void {
  if (!binding.value) {
  return handleImgByEl(el);
  }
@@ -59,7 +57,7 @@ export default {
  url: urlList?.[0],
  previewUrlList: urlList,
  zIndex: el?.zIndex,
- backDropZIndex: el?.backDropZIndex
+ backDropZIndex: el?.backDropZIndex,
  });
  };
  custom.close = () => unmountedPreviewImages();
@@ -69,17 +67,17 @@ export default {
  }
  handleImgByEl(el);
  },
- unmounted() {
+ unmounted(): void {
  unmountedPreviewImages();
  },
- updated(el: PreviewHTMLElement, binding: UpdateBindingTypes | undefined) {
+ updated(el: PreviewHTMLElement, binding: UpdateBindingTypes | undefined): void {
  el.zIndex = binding.value?.zIndex;
  el.backDropZIndex = binding.value?.backDropZIndex;
 
  if (binding.value) {
  const {
  value: { disableDefault },
- oldValue: { disableDefault: oldDisableDefault }
+ oldValue: { disableDefault: oldDisableDefault },
  } = binding;
  if (disableDefault !== oldDisableDefault) {
  if (disableDefault) {
@@ -89,5 +87,5 @@ export default {
  }
  }
  }
- }
+ },
 };
diff --git a/packages/devui-vue/devui/image-preview/src/image-preview-service.ts b/packages/devui-vue/devui/image-preview/src/image-preview-service.ts
@@ -12,7 +12,7 @@ class ImagePreviewService {
  // 暂时的禁止滚动穿透,后续应该考虑用modal组件来渲染预览组件
  static $overflow = '';
 
- static open(props: ImagePreviewProps) {
+ static open(props: ImagePreviewProps): void {
  this.$body = document.body;
  this.$div = document.createElement('div');
  this.$overflow = this.$body.style.overflow;
@@ -21,7 +21,7 @@ class ImagePreviewService {
 
  this.$body.style.setProperty('overflow', 'hidden', 'important');
  }
- static close() {
+ static close(): void {
  this.$body?.style.setProperty('overflow', this.$overflow);
  this.$overflow = null;
 

diff --git a/packages/devui-vue/devui/image-preview/src/image-preview-types.ts b/packages/devui-vue/devui/image-preview/src/image-preview-types.ts
@@ -4,31 +4,31 @@ export const imagePreviewProps = {
  url: {
  type: String,
  default: '',
- required: true
+ required: true,
  },
  previewUrlList: {
  type: Array as PropType<string[]>,
  default: () => [],
- required: true
+ required: true,
  },
  zIndex: {
  type: Number,
- required: false
+ required: false,
  },
  backDropZIndex: {
  type: Number,
- required: false
- }
+ required: false,
+ },
 } as const;
 
 export interface BindingTypes {
  value: {
- custom?: any;
+ custom?: Record<string, unknown>;
  disableDefault?: boolean;
  zIndex?: number;
  backDropZIndex?: number;
  };
- [key: string]: any;
+ [key: string]: unknown;
 }
 export interface UpdateBindingTypes extends BindingTypes {
  oldValue: BindingTypes['value'];