请收好这些日常必备的代码片段，让您码得更快！

起步

在前端项目的开发过程中，我会将一些在多个项目中比较常用实用的代码片段收藏起来放到我的仓库中，方便后续自己在开发项目时，就可以直接找到之前的代码，而不是去找以前的项目再去找里面的代码，这样子会变得繁琐很多。

在这一篇文章中，我会抽出几个比较常用的代码片段来和大家一起分享，如果您觉得这些代码对您开发或学习上有所帮助， 请帮我点一个小小的赞！感激不已！

1. ElementPlus图片上传组件

在ElementPlus组件库中有一个upload组件，提供文件上传组件，可以让用户上传图片/文件，如果上传的是图片，可以搭配image-preview组件进一步去完善它，提高用户体验。

upload组件是在开发过程中比较常用的组件之一，例如在开发管理后台之类的项目，图片上传组件几乎会在弹窗中出现。在组件库原本提供的upload组件如果直接套入项目中使用会使得代码变得非常多，而且是在多个组件中直接套入使用，会使得代码耦合度变得很高。

于是，我在项目中二次封装了upload这个组件，在后续我要使用的时候只需要引入这个组件，并双向绑定对应的数据Ref即可。(如下图使用)

<!-- 在使用时，直接使用即可，当然你还可以通过props属性修改组件的宽高度，提示语等，具体见Props参数 -->
<upload-image-cmp
  v-model="tempUploadImagePath"
/>

<script>
    const tempUploadImagePath = ref('')
</script>

组件代码地址：uploadImage.vue

2. Message

Message信息组件是非常常用的组件，基本上每个项目都会使用到这个组件，用来提醒用户一些操作信息之类，例如：XX操作完成，XX操作失败，请重试之类的字眼

它的使用方法也很简单，在项目中，使用ElMessage('this is a message.')即可。

但是这里会有一个问题，当我之后想要对所有ElMessage组件的选项进行修改时，我难道要在每一个ElMessage方法中注入对应的参数吗？

这个时候，你最好把这个方法抽离成公共函数来调用，后续如果有参数变动时，可以直接在这个公共函数中一次性处理

import { ElMessage, MessageOptions } from 'element-plus';

export function message(message: string, option?: MessageOptions) {
  ElMessage({ message, ...option });
}

ElementPlus组件代码地址：message/index.ts

AntDesign组件代码地址：message/antd.ts

3. useLabel

在elementPlus中，select，cascader组件需要我们提供一个CascaderOption类型的数组，来渲染子项的信息，但有些时候后端返回的数据并不是和CascaderOption类型一致的字段，需要我们做一些数据转换。

这个时候就需要使用到useLabel了，将请求回来的数据中把指定的字段转化为CascaderOption类型的数组

// 传入Api请求方法，会返回一个list字段（Ref）提供给组件使用即可
const {list} = useLabel(newsListApi)

如果Api请求回来的载体字段过多，最好的方法是和后端协商让接口直接返回一个CascaderOption类型的数组，减少服务器负载，减少网络拥塞等问题

useLabel代码地址：useLabel/index.ts

4. 数字范围组件

ElementPlus本身并没有提供数字访问组件，但有时业务需求可能会涉及到在一个表单项中输入数字范围的组件。这个时候可以使用inputNumberRange组件直接渲染即可。除了下面所演示的Props参数，该组件还有一些可选的参数和事件，详情请见组件源码

<template>
    <inputNumberRange
    v-model="value"
    min-placeholder="最小值"
    max-placeholder="最大值"
    />
</template>
<script setup>
// import cmp
import inputNumberRange from '@/lib/components/inputNumberRange.vue';

const value=ref('')
</script>

inputNumberRange组件代码地址：inputNumberRange/index.vue

5. wangeditor富文本组件

基于Vue封装的富文本组件，用于直接在页面中渲染富文本编辑器，并提供双向绑定接口，可直接对数据进行同步操作

<Editor v-model="content" placeholder="请填写富文本内容..."  />

wangeditor组件代码地址：wangeditor/index.vue

6. betterScroll滚动组件

基于Vue封装的betterScroll滚动组件，用于直接在页面渲染滚动容器，只需要设定容器高度即可

<template>
  <Scroll class="scrollContent">
    <p v-for="i in 100" :key="i">{{ i }}</p>
  </Scroll>
</template>
<script setup lang="ts">
// 引入组件
import Scroll from "./index.vue";
</script>
<style lang="less" scoped>
.scrollContent {
  // 设置滚动容器高度
  height: 300px;
  overflow: hidden;
}
</style>

betterScroll组件代码地址：betterScroll/index.vue

7. 手机验证码发送Hooks

在开发项目时，大多数项目都会有一个用户模块功能，这个时候就需要涉及到用户的登录操作，而用户登录里，其中有一部分是“手机验证码登录”功能，大多数项目在这部分代码的差异通常不会很大，所以我们可以将这一部分代码封装成一个通用的hooks

而在业务组件中，引入这个hooks并直接使用即可，变得非常方便快捷。

<template>
    <button :disabled="disable" @click="sendCode">{{ btnText }}</button>
</template>
<script>
    const { sendCode, btnText, disable } = useSendCode();
</script>

useSendCode代码地址：useSendCode/index.ts

8. Canvas自动换行函数

在canvas中插入文本时，它并不会自动换行，因为在canvas中绘制文本时，它将文本视为单个字符串，并且只能以单个字符串的形式进行绘制

如果想在canvas中实现自动换行的文本布局，需要将文本字符串分解为单词，然后逐个单词地添加到当前行中。在添加每个单词之前，检查当前行的宽度加上新单词的宽度是否超过了画布的宽度，如果是，则将当前行的文本绘制到画布上并开始新的行

wrapText函数代码地址：canvas/wrapText.js

9. 清空对象值

在表单完成/重置时，需要将表单对象进行数据清空，这个时候可以使用clearObject方法对它进行数据清空操作。

export default (obj: any, value = undefined) :any => {
  if (!obj) return {};
  const keys = Reflect.ownKeys(obj);
  const tmp = {};
  keys.forEach((key) => {
    Reflect.set(tmp, key, value);
  });
  return tmp;
};

10. 表单字段校验

在ElementPlus中，表单字段校验是依赖于async-validator这个库的

一般我们写字段校验，比较简洁的情况是这样子的

export const name = [
  {
    required: true,
    message: '请输入商家名称',
    trigger: 'blur'
  }
];

当多个表单字段需要设置校验规则时，会发它们之间大多的属性值是一致的，所以我们又可以把这部分封装成一个公共函数genRequiredRule来使用，让代码更加简洁！

export const name = [genRequiredRule('请输入商家名称')],

genRules函数代码地址：utils/genRules.ts

11. 时间相对计算函数

在开发社交平台或者是一些任务模板时，可能需要显示“XX天前发布”，“XX小时前发布”的字样，而后端返回的是一个绝对时间，这个时候我们需要计算出当前时间离过去的时间相差了多久。

export default function usePassTime(sourceTime:number) {
  const currentTime = Date.now();
  const time = currentTime - sourceTime;
  const day = Math.floor(time / (1000 * 60 * 60 * 24));
  const hour = Math.floor(time / (1000 * 60 * 60));
  const min = Math.floor(time / (1000 * 60));
  const second = Math.floor(time / 1000);
  const month = Math.floor(day / 30);
  const year = Math.floor(month / 12);
  if (year) return `${year}年前`;
  if (month) return `${month}个月前`;
  if (day) return `${day}天前`;
  if (hour) return `${hour}小时前`;
  if (min) return `${min}分钟前`;
  if (second) return `${second}秒前`;
  return '刚刚';
}

可以使用usePassTime方法将时间值传递进去，函数将自动计算出相对时间并返回。

12. 文件大小后缀转换

在Node.js中，fs.stat函数获取一个文件的总字节数后，我们需要将这个数值转化为易读的单位，提高用户使用体验，可以使用下面这个readablizeBytes函数将对应的数值进行转化

export default function readablizeBytes(bytes: number): string {
  if (bytes === 0) return '';
  const s = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];
  const e = Math.floor(Math.log(bytes) / Math.log(1024));
  return `${(bytes / 1024 ** Math.floor(e)).toFixed(2)} ${s[e]}` ?? 0;
}

readablizeBytes(6251634)
// '5.96 MB'

13. 进度条样式优化

与HTML原生滚动条相比，优化后的滚动进度条样式可以提供更好的用户体验和界面美观度。它可以使用各种颜色、形状和动画效果来增强用户对当前任务进展状态的感知，并且可以适应应用程序或网站的整体风格

/* 滚动槽 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    border-radius: 3px;
    background: rgba(0,0,0,0.06);
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.08);
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(0,0,0,0.12);
    -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}

往期精彩

• Vue3这样子结合hook写弹窗组件更快更高效
• 在Vue3这样子写页面更快更高效
• 如何在Vue3中更优雅的使用echart图表
• axios封装思想+API集中管理+无感刷新Token

最后

除了上面介绍的这些组件封装和函数方法，还有其他的代码片段存放到了snippets仓库中，如果您想了解更多代码片段可以把项目Clone到本地中进行查看。

如果您觉得这个snippets对您有所帮助，可以点一个小小的star，在表达对作者的同事，也方便后续自己查找到这些代码片段哦

如果您也有一些比较常用的代码片段，可以向仓库发起PR哦！我看到了第一时间会进行处理！🤩🤩