Utils 分类

为了解决单个页面或者组件内存在多个loading 时，参数定义混乱的问题，封装了一个LoadingButton组件。


<script lang="ts">
  import {ref, useAttrs} from "vue";
  import {omit} from "lodash-es";
  // 关闭事件继承
  defineOptions({
    inheritAttrs: false
  })

  const loading = ref(false)
  const attrs = useAttrs()
  const handelClick = async () => {
    loading.value = true
    // 调用父组件传递的方法
    await attrs.onClick?.()
    loading.value = false
  }
</script>
<template>
  <el-button v-bind="omit($attrs, 'onClick')" :loading="loading"></el-button>
</template>

Mr shen2025/10/8小于 1 分钟

二次组件封装

什么是二次封装

二次封装（Wrapper Component）是指基于现有 UI 组件库（如 Element Plus、Ant Design、Naive UI 等）进行功能扩展和定制化开发的组件。通过封装，我们可以：

统一项目中的组件使用规范
简化重复的配置代码
添加业务相关的默认行为
提供更好的类型提示和开发体验

封装要点

二次组件封装需要关注以下五个核心要素：

要素	说明
属性（Props）	透传或扩展原组件的属性
事件（Events）	透传或自定义事件
插槽（Slots）	透传或自定义插槽内容
方法（Expose）	暴露原组件的方法供父组件调用
类型提示（Types）	完整的 TypeScript 类型支持

Mr shen2025/10/8大约 4 分钟

电池充电及电量展示效果

动态充电效果

电量显示效果

Mr shen2025/8/27大约 3 分钟

颜色转化工具

color

下载

使用

import Color from "color"

Mr shen2025/8/21小于 1 分钟

时间转化工具

dayjs

下载

使用

import dayjs from 'dayjs';

const now = dayjs(); // 获取当前时间

Mr shen2025/8/21大约 2 分钟

文件上传

上传封装

import {setAttributes} from "@/utils/index";
import {message} from "@/utils/message";
import {$t} from "@/plugins/i18n";

type FileOptions = {
    isMultiple?: boolean;
    isDirectory?: boolean;
    accept?: string;
    maxSize?: number;
};

export function selectFiles(options: FileOptions): Promise<FileList> {
    return new Promise<FileList>((resolve, reject) => {
        const input = document.createElement("input");
        let props = {
            type: "file",
            style: {
                display: "none"
            }
        };

        function setProps(
            props: any,
            isMultiple: boolean,
            isDirectory: boolean,
            accept: string
        ) {
            props["accept"] = accept;
            if (isMultiple) {
                props["multiple"] = "multiple";
            }
            if (isDirectory) {
                props["webkitdirectory"] = "webkitdirectory";
                props["mozdirectory"] = "mozdirectory";
                props["odirectory"] = "odirectory";
            }
        }

        const {
            isMultiple = false,
            isDirectory = false,
            accept = "*/*",
            maxSize
        } = options;
        setProps(props, isMultiple, isDirectory, accept);
        setAttributes(input, props);
        input.click();
        let fileCancel = true;
        window.addEventListener(
            "focus",
            () => {
                setTimeout(() => {
                    if (fileCancel) {
                        input.remove();
                    }
                });
            },
            {once: true}
        );
        input.addEventListener("change", (ev: Event) => {
            fileCancel = false;
            // TODO  isDirectory 为true时，accept属性无效，这里需遍历文件夹下的文件，判断是否符合accept条件，暂不处理。
            const result = (ev.target as HTMLInputElement).files;
            if (maxSize) {
                const overSize = Array.from(result).some(file => file.size > maxSize);
                if (overSize) {
                    message($t("message.wjdxcc"), {
                        type: "warning"
                    });
                    reject(new Error($t("message.wjdxcc")));
                }
            }
            resolve(result);
            input.remove();
        });
    });
}

Mr shen2025/8/21小于 1 分钟

UUID

基于时间创建不会重复的Id<number> 以毫秒为基准

interface IdGenerator<T> {
  generate(): T;
}

class SequenceIdGenerator implements IdGenerator<number> {
  // （十六进制）0x176b986fc00 =（十进制）1609430400000 = 2021-1-1 0:0:0
  private static BASE_TIMESTAMP = 0x176b986fc00;
  // （十六进制）0x40000000 =（二进制）1000000000000000000000000000000
  // （十六进制）0xef80 =（二进制）1110111110000000
  // & 0xef80 = host共16位,后7位置为0
  private host = (Math.random() * 0x40000000) & 0xef80;
  private sequence = 0;
  private lastTime = 0;

  /**
   * 轮询获取下一毫秒
   * @private
   */
  private getNextTime(): number {
    let mill = Date.now();
    while (mill <= this.lastTime) {
      mill = Date.now();
    }
    return mill;
  }

  generate(): number {
    let currentTime = Date.now();

    if (this.lastTime === currentTime) {
      // （十六进制）0x7f =（十进制）127 =（二进制）1111111
      // 自增序列(& 0x7f) 相当于自增最大范围128(0~127), 意味着同一时间戳下最多只能生成128个id
      // (this.sequence++ & 0x7f) = 保留后七位
      this.sequence = ((this.sequence + 1) & 0x7f) + this.host;
      if (this.sequence === this.host) {
        // 同一毫秒序列用完
        // 获取下一毫秒
        currentTime = this.getNextTime();
      }
    } else {
      // 不同毫秒序列归零
      this.sequence = this.host;
    }
    // 时间存档
    this.lastTime = currentTime;
    // （十六进制）0x1fffffffff =（二进制）1111111111111111111111111111111111111 = （十进制）137438953471
    // a & 0x1fffffffff 即保留a的后37个bit的值，使a的前3个bit置0
    // 任何小于0x1fffffffff的数 与 上 0x1fffffffff等于它本身
    const timestamp =
      BigInt(currentTime - SequenceIdGenerator.BASE_TIMESTAMP) &
      BigInt(0x1fffffffff);

    // sequence有16位, 所以timestamp左移16位
    return Number(timestamp << BigInt(16)) + this.sequence;
  }
}

export const idGen: IdGenerator<number> = new SequenceIdGenerator();

Mr shen2025/8/21大约 1 分钟

EventBus 事件总线

概述

EventBus 是一个观察者模式的实现，用于组件之间的解耦通信。在 Vue 项目中，兄弟组件或跨层级组件之间的通信往往比较麻烦，EventBus 提供了一种简单而强大的解决方案，允许组件之间通过事件进行松耦合的通信。

核心概念

发布-订阅模式（Publish-Subscribe Pattern）：发布者发布事件，订阅者订阅事件，事件总线负责两者之间的协调
事件监听（$on）：注册事件监听器，当事件触发时执行回调
事件触发（$emit）：触发指定事件，通知所有订阅者
事件卸载（$off）：移除事件监听器
单次监听（$once）：只执行一次的监听器，执行后自动销毁

Mr shen2025/8/21大约 7 分钟

UnoCss

UnoCSS 是即时原子 CSS 引擎，其设计灵活且可扩展。核心是不固定的，所有 CSS 工具都是通过预设提供的。

配置

自定义规则 Rules

基础配置

    uno.config.ts
  
import {defineConfig} from 'unocss'

export default defineConfig({
    rules: [
        ['m-1', {margin: '1px'}],
    ],
})

Mr shen2025/8/21大约 4 分钟

好用的工具库积累

拖拽库 interactjs

优势

轻量无其他依赖性能高
功能强大支持拖拽、缩放、旋转等操作
易于使用简单的 API 设计，上手快
浏览器兼容好（Chrome/Firefox/Safari/Edge）

Mr shen2023/10/8大约 2 分钟