搜索结果列表页面开发

src/components/Number/README.md

@@ -0,0 +1,27 @@
+# Number
+
+### 说明
+- 将数字转换为k或者m的缩写，方便阅读，默认保留2位小数。
+- 支持bit单位运算
+
+``` js
+// 结果：1.02K
+<Number :number="1024" />
+
+// 结果：1.03K
+<Number :number="1025" />
+
+// 文档提交计算，结果：1KB
+<Number :number="1024" byte />
+
+// 结果：1.001K
+<Number :number="1001" :fixed="3" />
+```
+
+### Props
+
+| 参数       | 说明                   | 类型                        | 可选值    | 默认值     |
+|-----------|------------------------|----------------------------|----------|-----------|
+| number    | 数字                    | string \| number           | -        | -         |
+| fixed     | 有效的小数位个数          | number                     |          | 2         |
+| byte      | 文件体积等计算，1024为基数 | boolean                   |          | false     |

src/components/Number/index.vue

@@ -0,0 +1,44 @@
+<template>
+  {{ transfer(number) }}
+</template>
+
+<script setup lang="ts">
+interface IProps {
+  number: string | number,
+  fixed?: number,
+  byte?: boolean
+}
+const props = withDefaults(defineProps<IProps>(), {
+  fixed: 2
+});
+
+// 此处可以增加单位定义
+const DECIMAL_PACE = [
+  { unit: 'K', base: 1e3 },
+  { unit: 'M', base: 1e6 } // 百万
+];
+const BYTE_PACE = [
+  { unit: 'B', base: 1 },
+  { unit: 'KB', base: Math.pow(2, 10) },
+  { unit: 'MB', base: Math.pow(2, 20) },
+  { unit: 'GB', base: Math.pow(2, 30) }
+];
+
+const transfer = (val: number | string): string => {
+  try {
+    const pace = props.byte ? BYTE_PACE : DECIMAL_PACE;
+
+    return pace.reduce((res, { base, unit }): string => {
+      if (val as number >= base) {
+        const fixedBase = Math.pow(10, props.fixed); // 保留的小数位个数，修正四舍五入
+        res = `${parseFloat((Math.round((val as number) * fixedBase / base) / fixedBase).toFixed(props.fixed))} ${unit}`;
+      }
+      return res;
+    }, `${val}`);
+  } catch (err) {
+    // ignore
+  }
+
+  return `${val}`;
+};
+</script>