vue前端常用工具类汇总

总结的工具类,可直接复用

utils文件夹中的util.js编写公共工具类

const initUtil = {}

Byte 转 KB/MB/GB

initUtil.getfilesize = (size = 0,) => {if (!size) return '0.00GB';const num = 1000.00; //byteif (size < num)return size + "B";if (size < Math.pow(num, 2))return (size / num).toFixed(2) + "KB"; //kbif (size < Math.pow(num, 3))return (size / Math.pow(num, 2)).toFixed(2) + "MB"; //Mif (size < Math.pow(num, 4))return (size / Math.pow(num, 3)).toFixed(2) + "GB"; //G
}

知识点:
1、Math.pow(base, exponent):Math.pow(2, 3),2 的 3 次方是 8。
2、toFixed(2) 格式化数字,返回字符串类型,当前保留数字后两位

获取url指定参数

  1. 使用 URLSearchParams 对象:
initUtil.getUrlParam = (name) => {// 假设 URL 为:https://example.com/page?name=John&age=25// 创建 URLSearchParams 对象,将 URL 查询参数解析到该对象中const urlParams = new URLSearchParams(window.location.search);// 获取指定参数的值return urlParams.get(name)
}
  1. 使用正则表达式:
initUtil.getUrlParam = (name,url) => {name = name.replace(/[\[\]]/g, "\\$&");const regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),results = regex.exec(url || window.location.href);if (!results) return null;if (!results[2]) return '';return decodeURIComponent(results[2].replace(/\+/g, " "));
}getUrlParam('name')

知识点

1、正则表达式(Regular Expression): 正则表达式用于在 URL 中匹配指定的参数名,并捕获对应的参数值。 name = name.replace(/[[]]/g, “\$&”); 这一行用于将参数名中的方括号进行转义,确保正则表达式匹配正确。

2、RegExp 对象: const regex = new RegExp(“[?&]” + name + “(=([^&#]*)|&|#|$)”); 创建了一个正则表达式对象,该正则表达式匹配 URL 查询字符串中指定参数名的模式。

3、exec 方法: regex.exec(url || window.location.href); 使用 exec 方法在URL中执行正则表达式,返回匹配的结果数组。结果数组中,results[0] 包含整个匹配项,results[2] 包含参数值

日期格式化

initUtil.dateFormat = (date, format = 'YYYY-MM-DD HH:mm:ss') => {const config = {YYYY: date.getFullYear(),MM: date.getMonth() + 1,//getMonth() 方法根据本地时间返回指定日期的月份(从 0 到 11)DD: date.getDate(),HH: date.getHours(),mm: date.getMinutes(),ss: date.getSeconds(),}for (const key in config) {format = format.replace(key, config[key])}return format
}

知识点:

replace方法的基本语法是:

newString = originalString.replace(searchValue, replaceValue);
  • originalString 是原始字符串。
  • searchValue 是要被替换的子字符串或正则表达式。
  • replaceValue 是替换的内容。

如果 searchValue 是一个字符串,只会替换第一次出现的匹配项。
如果 searchValue 是一个正则表达式,会替换所有匹配项。
返回的是一个新的字符串,原始字符串并没有被改变

以下是一些示例:

let originalString = "Hello, world! Hello, universe!";
let newString = originalString.replace("Hello", "Hi");
console.log(newString);
// 输出: "Hi, world! Hello, universe!"let regex = /Hello/g;  // 使用正则表达式,全局匹配
newString = originalString.replace(regex, "Hi");
console.log(newString);
// 输出: "Hi, world! Hi, universe!"

返回时间段

initUtil.getTimeState = (time, lang) => {let text = ``;if (time) {// 获取当前小时let hours = Number(time.split(':')[0]);// 设置默认文字// 判断当前时间段if (lang !== 'en') {if (hours >= 0 && hours <= 11) {text = `上午`;} else {text = `下午`;}} else {if (hours >= 0 && hours <= 11) {text = `AM`;} else {text = `PM`;}}}// 返回当前时间段对应的状态return text;
}

防抖

initUtil.debounce = (fn, delay = 500) => {let timerreturn function () {clearTimeout(timer)timer = setTimeout(() => {fn.apply(this, arguments)}, delay)}
}

节流

initUtil.throttle = (fn, delay = 500) => {let timerreturn function () {if (!timer) {clearTimeout(timer)timer = setTimeout(() => {fn.apply(this, arguments)timer = null}, delay)}}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/605029.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

iview 选择框远程搜索 指定筛选的参数

问题&#xff1a;开启了filterable之后&#xff0c;选择框是允许键盘输入的&#xff0c;但是会对选择列表进行过滤&#xff0c;如果不想使用再次过滤&#xff0c;可以试下下面这个方法。 场景&#xff1a;输入加密前的关键字筛选&#xff0c;选择框显示加密后的数据 说明一&a…

Baumer工业相机堡盟工业相机如何通过NEOAPI SDK实现相机的高速图像保存(C++)

Baumer工业相机堡盟工业相机如何通过NEOAPI SDK实现相机的高速图像保存&#xff08;C&#xff09;&#xff09; Baumer工业相机Baumer工业相机的图像高速保存的技术背景Baumer工业相机通过NEOAPI SDK函数图像高速保存在NEOAPI SDK里实现线程高速图像保存&#xff1a;工业相机高…

rke2 offline install kubernetes v1.26

文章目录 1. 准备2. 安装 ansible3. 基础配置3.1 配置 hosts3.2 安装软件包3.3 内核参数3.4 连接数限制3.5 关闭swap 、selinux、防火墙3.6 时间同步 4. RKE2 安装4.1 下载安装4.2 配置其他管理节点4.3 新增 worker 节点 1. 准备 7 台主机 主机名ipcpu内存diskos角色user密码…

11.3编写Linux串口驱动

编写串口驱动主要步骤 构建并初始化 struct console 对象&#xff0c;若串口无需支持 console 可省略此步骤 //UART驱动的console static struct uart_driver virt_uart_drv; static struct console virt_uart_console {//console 的名称&#xff0c;配合index字段使用&…

UniApp登录后如何实现页面跳转?

随着移动设备普及&#xff0c;越来越多的开发者选择使用uniapp来构建他们的应用。uniapp的跨平台特性大大提高了开发效率&#xff0c;简化了应用的运营和维护工作。在uniapp应用中&#xff0c;登录跳转页面是一个重要的功能&#xff0c;它能够确保用户安全地访问应用内的敏感信…

unity C#中Array、Stack、Queue、Dictionary、HashSet优缺点和使用场景总结

文章目录 数组 (Array)列表 (List<T>)栈 (Stack<T>)队列 (Queue<T>)链表 (LinkedList<T>)哈希表 (Dictionary<TKey, TValue>) 或 HashSet<T>集合 (Collection<T>) 数组 (Array) 优点&#xff1a; 高效访问&#xff1a;通过索引可以…

Zabbix相关问题及答案(2024)

1、Zabbix是什么&#xff1f;有什么作用&#xff1f; Zabbix是一个企业级的开源监控解决方案&#xff0c;设计用于监控和跟踪服务器、网络设备、硬件和软件的状态和性能。它由Alexei Vladishev开发&#xff0c;并且被广泛地用于各种不同规模的IT环境管理。 Zabbix的主要作用和…

1-04C语言执行过程

一、概述 本小节主要讲解一个C程序从源代码到最终执行的过程&#xff0c;这个过程又可以细分为两部分&#xff1a; 源代码到可执行文件的过程可执行文件在内存中执行 本小节是C语言基础当中&#xff0c;比较容易被初学者忽视的知识点。而实际上&#xff1a; 熟悉C程序从源文…

前端超好玩的小游戏合集来啦--周末两天用html5做一个3D飞行兔子萝卜小游戏

文章目录 💖飞行兔子萝卜小游戏💟效果展示💟代码展示源码获取💖飞行兔子萝卜小游戏 💟效果展示 💟代码展示 <body> <script src=

Debezium发布历史53

原文地址&#xff1a; https://debezium.io/blog/2019/04/11/debezium-0-9-4-final-released/ 欢迎关注留言&#xff0c;我是收集整理小能手&#xff0c;工具翻译&#xff0c;仅供参考&#xff0c;笔芯笔芯. Debezium 0.9.4.Final 发布 四月 11, 2019 作者&#xff1a; Gunna…

如何选猫粮:买主食冻干猫粮需要注意什么?

随着养猫的人越来越多&#xff0c;铲屎官们对猫咪的饮食也越来越注重。除了猫粮&#xff0c;很多铲屎官还会给猫咪准备小零食。那么&#xff0c;猫咪是不是除了猫粮就没有其他可吃的了呢&#xff1f;答案当然不是。猫咪还有猫冻干、冻干猫粮、猫条等可以选择。每个铲屎官都希望…

Elasticsearch查询多个条件组合

在Elasticsearch&#xff08;ES&#xff09;中&#xff0c;你可以使用"bool"查询来组合多个条件。 下面是一个简单的例子&#xff0c;演示如何在一个查询中使用多个字段&#xff1a; 假设你有一个索引&#xff08;Index&#xff09;叫做"my_index"&#…

【MySQL】索引基础

文章目录 1. 索引介绍2. 创建索引 create index…on…2.1 explain2.2 创建索引create index … on…2.3 删除索引 drop index … on 表名 3. 查看索引 show indexes in …4. 前缀索引4.1 确定最佳前缀长度&#xff1a;索引的选择性 5. 全文索引5.1 创建全文索引 create fulltex…

jQuery :nth-of-type(n)选择器的用法详解

:nth-of-type(n)选择器语法 $(selector:nth-of-type(n)) :nth-of-type(n)选择器语法解析 jQuery中&#xff0c;:nth-of-type(n)选择器可以对selector选择器匹配选择到的所有HTML元素进行二次匹配选择&#xff0c;为了更好地阐述:nth-of-type(n)的语法&#xff0c;这里假设se…

Vue3.4更新 “Slam Dunk“发布!!!

Announcing Vue 3.4 | The Vue Point. vue3.4更新官方文档 在vue2即将结束更新的时候&#xff0c;vue3迎来了一个重要的更新。代号为“&#x1f3c0; Slam Dunk”&#xff0c;即"灌篮高手"。这个版本进行了很多显著的内部改进&#xff0c;最重要的是模版解析的底层逻…

Github 2024-01-08开源项目周报 Top14

根据Github Trendings的统计&#xff0c;本周(2024-01-08统计)共有14个项目上榜。根据开发语言中项目的数量&#xff0c;汇总情况如下&#xff1a; 开发语言项目数量Python项目5TypeScript项目3C项目2Dart项目1QML项目1Go项目1Shell项目1Rust项目1JavaScript项目1C#项目1 免费…

Mockito+junit5搞定单元测试

目录 一、简介1.1 单元测试的特点1.2 Mock类框架的使用场景1.3 常见的Mock框架1.3.1 Mockito1.3.2 EasyMock1.3.3 PowerMock1.3.4 Testable1.3.5 比较 二、Mockito的使用2.1 导入pom文件2.2 mock对象和spy对象2.3 初始化mock/spy对象的方式2.4 参数匹配2.5 方法插桩2.6 InjectM…

javamail 发送邮件报错:Could not connect to SMTP host: smtp.163.com, port: 25 ,问题解决

报错内容 Exception in thread "main" javax.mail.MessagingException: Could not connect to SMTP host: smtp.163.com, port: 465, response: -1at com.sun.mail.smtp.SMTPTransport.openServer(SMTPTransport.java:1949)at com.sun.mail.smtp.SMTPTransport.prot…

IO进程线程Day5

1> 将互斥机制代码重新实现一遍 #include<myhead.h>char buf[128]; //临界资源pthread_mutex_t mutex; //创建锁资源//分支线程 void* task(void* arg) {while(1){//获取锁资源pthread_mutex_lock(&mutex);printf("这里是分支线程:%s\n",buf);st…

掌握Java并发编程:Lock、Condition与并发集合

在Java并发编程中&#xff0c;正确地处理多线程间的同步和共享资源是非常重要的。Java提供了一些并发编程的工具和类&#xff0c;其中Lock、Condition和并发集合是常用的重要组件。以下是关于它们的详细讨论&#xff1a; Lock&#xff08;锁&#xff09;&#xff1a; Lock是Jav…