feat: 添加 utils 函数，更新 image 组件的 props 和样式

Author: IceyWu

components/_utils/index.ts

@@ -7,3 +7,4 @@ export * from "./props";
 export * from "./px-check";
 export * from "./raf";
 export * from "./style";
+export * from "./utils";

components/_utils/is.ts

@@ -91,3 +91,12 @@ export function isUrl(path: string): boolean {
   const reg = /^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- ./?%&=]*)?/;
   return reg.test(path);
 }
+
+/**
+ * @description 判断target是否对象
+ * @param value
+ * @return {boolean}
+ */
+export function isObj(value: any): value is object {
+  return Object.prototype.toString.call(value) === '[object Object]' || typeof value === 'object'
+}

components/_utils/utils.ts

@@ -0,0 +1,79 @@
+import { isArray, isObj, isString } from './is'
+/**
+ * @description 对num自动填充px
+ * @param {number} num
+ * @return {string} num+px
+ */
+export function addUnit(num: number | string) {
+  return Number.isNaN(Number(num)) ? `${num}` : `${num}px`
+}
+
+/**
+ * 将驼峰命名转换为短横线命名。
+ * @param {string} word 待转换的词条
+ * @returns {string} 转换后的结果
+ */
+export function kebabCase(word: string): string {
+  // 使用正则表达式匹配所有大写字母，并在前面加上短横线，然后转换为小写
+  const newWord: string = word
+    .replace(/[A-Z]/g, (match) => {
+      return `-${match}`
+    })
+    .toLowerCase()
+
+  return newWord
+}
+
+
+/**
+ * 将外部传入的样式格式化为可读的 CSS 样式。
+ * @param {object | object[]} styles 外部传入的样式对象或数组
+ * @returns {string} 格式化后的 CSS 样式字符串
+ */
+export function objToStyle(styles: Record<string, any> | Record<string, any>[]): string {
+  // 如果 styles 是数组类型
+  if (isArray(styles)) {
+    // 使用过滤函数去除空值和 null 值的元素
+    // 对每个非空元素递归调用 objToStyle，然后通过分号连接
+    const result = styles
+      .filter((item) => {
+        // eslint-disable-next-line unicorn/no-null
+        return item != null && item !== ''
+      })
+      .map((item) => {
+        return objToStyle(item)
+      })
+      .join(';')
+
+    // 如果结果不为空，确保末尾有分号
+    return result ? (result.endsWith(';') ? result : `${result};`) : ''
+  }
+
+  if (isString(styles)) {
+    // 如果是字符串且不为空，确保末尾有分号
+    return styles ? (styles.endsWith(';') ? styles : `${styles};`) : ''
+  }
+
+  // 如果 styles 是对象类型
+  if (isObj(styles)) {
+    // 使用 Object.keys 获取所有属性名
+    // 使用过滤函数去除值为 null 或空字符串的属性
+    // 对每个属性名和属性值进行格式化，通过分号连接
+    const result = Object.keys(styles)
+      .filter((key) => {
+        // eslint-disable-next-line unicorn/no-null
+        return styles[key] != null && styles[key] !== ''
+      })
+      .map((key) => {
+        // 使用 kebabCase 函数将属性名转换为 kebab-case 格式
+        // 将属性名和属性值格式化为 CSS 样式的键值对
+        return [kebabCase(key), styles[key]].join(':')
+      })
+      .join(';')
+
+    // 如果结果不为空，确保末尾有分号
+    return result ? (result.endsWith(';') ? result : `${result};`) : ''
+  }
+  // 如果 styles 不是对象也不是数组，则直接返回
+  return ''
+}

components/image/image.ts

@@ -1,107 +1,56 @@
-import type { ImageProps as ImagePropsType } from "@uni-helper/uni-app-types";
+import type { ImageMode } from "@uni-helper/uni-app-types";
 import type { ExtractPropTypes, PropType } from "vue";
-import type { LoadingMode } from "./type";
-import { makeStringProp } from "../_utils";
-
-interface ImgProps {
-  file: string;
-  fileType: string;
-  thumbnail: string;
-  videoSrc: string;
-  blurhash?: string | undefined;
-  cover?: string;
-  preSrc?: string;
-  alt?: string;
-  src?: string;
-  baseSrc?: string;
-}
-
-interface ErrorConfig {
-  open: boolean;
-  errSrc: string;
-}
+import { makeNumericProp } from "../_utils";
 
 // 定义 props
 export const imageProps = {
-  /**
-   * @description 表单类型，可选值为 `LoadingMode` 类型中定义的值，默认值为 'default'
-   */
-  loadingMode: makeStringProp<LoadingMode>("blurhash"),
-  /**
-   * @description 是否禁用刷新功能
-   * @default false
-   */
-  isDisabledRefresh: {
-    type: Boolean,
-    default: false,
-  },
-
-  /**
-   * @description
-   */
-  imageProps: {
-    type: Object as PropType<
-      Partial<Omit<ImagePropsType, "loading" | "finished" | "onLoad">>
-    >,
-    default: () => ({
-      lazyLoad: true,
-      mode: "widthFix",
-    }),
-  },
-  data: {
-    type: Object as PropType<ImgProps>,
-    default: () => ({}),
-  },
+  mode: {
+    type: String as PropType<ImageMode>,
+    default: "scaleToFill",
+  } as const,
   width: {
-    // type: [String, Number],
-    type: String,
-    default: "100%",
+    type: [String, Number],
   },
   height: {
-    // type: [String, Number],
-    type: String,
-    default: "100%",
-  },
-  isShowBase: {
-    type: Boolean,
-    default: false,
-  },
-  resize: {
-    type: Number,
-    default: 0,
+    type: [String, Number],
   },
   delay: {
     type: Number,
-    default: 500,
+    default: 0,
   },
-  borderRadius: {
-    // type: [String, Number],
+  radius: {
     type: Number,
     default: 0,
   },
-  minHeight: {
-    // type: [String, Number],
+  minHeight: makeNumericProp("200rpx"),
+  lazyLoad: {
+    type: Boolean,
+    default: true,
+  },
+  customStyle: {
     type: String,
-    default: "200rpx",
+    default: "",
   },
-  errConfig: {
-    type: Object as PropType<ErrorConfig>,
-    default: () => ({
-      open: false,
-      errSrc: "",
-    }),
+  round: {
+    type: Boolean,
+    default: false,
   },
-  placeholder: {
+  customClass: {
     type: String,
     default: "",
   },
+
   src: {
     type: String,
     default: "",
   },
-  isLpPreset: {
-    type: Boolean,
-    default: false,
+  placeholderSrc: {
+    type: String,
+    default: "",
+  },
+  filter: {
+    type: String,
+    default: "",
   },
 } as const;