1. 项目中时间处理方法
import dayjs from "dayjs";
//dayjs 插件--季度
var quarterOfYear = require("dayjs/plugin/quarterOfYear");
dayjs.extend(quarterOfYear);
//本周开始时间
this.weekStart = dayjs(dayjs().startOf("week")).format(
"YYYY-MM-DD HH:mm:ss"
);
//本月开始时间
this.monthStart = dayjs(dayjs().startOf("month")).format(
"YYYY-MM-DD HH:mm:ss"
);
//本季度开始时间
this.quarterStart = dayjs(dayjs().startOf("quarter")).format(
"YYYY-MM-DD HH:mm:ss"
);
//本年开始时间
this.yearStart = dayjs(dayjs().startOf("year")).format(
"YYYY-MM-DD HH:mm:ss"
);
//当前时间
this.nowTime = dayjs(dayjs(new Date())).format("YYYY-MM-DD HH:mm:ss");
this.formInline = {
startTime: this.weekStart,
endTime: this.nowTime,
};
//当前时间
this.formInline.startTime = dayjs(dayjs(new Date())).format("YYYY-MM-DD");
//明天
this.formInline.endTime = dayjs().subtract(-1, 'day').format("YYYY-MM-DD");
//昨天
this.formInline.endTime = dayjs().subtract(1, 'day').format("YYYY-MM-DD");
2. element 时间组件处理
需求: XX日期 < 有效期
<p><i style="color: #f00">* </i>有效期</p>
<p>
<el-date-picker
style="width: 100%"
v-model="formInline.qualityDate"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions0"
>
</el-date-picker>
</p>
<p><i style="color: #f00">* </i>XX日期</p>
<p>
<el-date-picker
style="width: 100%"
v-model="formInline.buyDate"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions1"
>
</el-date-picker>
</p>
pickerOptions0: {
//结束时间不能大于开始时间
disabledDate: (time) => {
return time.getTime() < Date.now() - 8.64e7;
},
},
pickerOptions1: {
disabledDate: (time) => {
return time.getTime() > Date.now() - 8.64e7;
},
},
3. 计时器功能
<div class="year">2022.01.01</div>
<div class="hour">12:00:00</div>
getDayjsTime() {
let t = null;
t = setTimeout(time, 1000);
function time() {
clearTimeout(t);
let year = document.querySelector('.year');
let hours = document.querySelector('.hour');
year.innerHTML = dayjs(`${new Date()}`).format('YYYY.MM.DD')
hours.innerHTML = dayjs(`${new Date()}`).format('HH:mm:ss')
t = setTimeout(time, 1000);
}
},
4. 文字复制
this.copyTex:'复制的内容'
onCopy() {
try {
navigator.clipboard.writeText(this.copyTex).then(() => {
this.$message.success("复制成功");
});
} catch (error) {
// 动态创建 textarea 标签
const textarea = document.createElement("textarea");
// 将要 copy 的值赋给 textarea 标签的 value 属性
textarea.value = this.copyTex
// 将 textarea 插入到 body 中
document.body.appendChild(textarea);
// 选中值并复制
textarea.select();
const result = document.execCommand("copy");
if (result) {
this.$message.success("复制成功");
} else {
this.$message.error("复制失败");
}
// 操作完成后删除标签
document.body.removeChild(textarea);
}
5. 获取url参数
/**
* @description:获取url参数
* @param {type}
* @return: 返回地址栏 ? 后面参数 是一个对象 用 = 分割 作为对象键值对
*/
//工具函数
export function getUrl() {
let query = window.location.hash
if (query == null || query.indexOf('?') < 0) {
return null
}
query = query.split('?')[1]
const urlParam = {}
const datas = query.split('&')
for (let i = 0; i < datas.length; i++) {
const pair = datas[i].split('=')
urlParam[pair[0]] = decodeURIComponent(decodeURIComponent(pair[1]))
}
return urlParam
}
//组件中使用
import { getUrl } from '../../utils/index'
//地址栏 http://localhost:8888/#/employees/detail?id=54sb&name=lff&age=18
const url = getUrl()
console.log(url) // {id:"54sb", name:"lff", age:"18"}
6. 防抖
1、安装 lodash
# yarn add lodash
npm i lodash
2、防抖处理
// lodash 支持按需加载，有利于打包结果优化
import { debounce } from "lodash"
// debounce 函数
// 参数1：函数
// 参数2：防抖时间
// 返回值：防抖之后的函数，和参数1功能是一样的
handler: debounce(function (val) {
this.loadSearchSuggestion(val)
}, 1000)
7. 数组去重
//方法一 Map (指定对象属性去重)
/**
* @description:数组去重
* @param {arr, key:键名}
* @return: result
*/
const arrayToHeavy = (arr, key) => {
const result = [];
const mapList = new Map();
arr.forEach((item) => {
if (!mapList.has(item[key])) {
result.push(item);
mapList.set(item[key], true);
}
});
return result;
};
// 方法二 reduce
let arr =[1,2,3,4,2,3,6,8,5]
const arr1 = arr.reduce((newArr,item,arr)=>{
if(!newArr.includes(item)){
newArr.push(item)
}
return newArr
},[])
方法三 indexOf includes去重
let result= []
for(let i = 0;i<arr.length;i++){
//indexOf
// if(result.indexOf(arr[i])===-1){
// result.push(arr[i])
// }
//includes
if(!result.includes(arr[i])){
result.push(arr[i])
}
};
8. 数组转树
/**
* @description:数组转树
* @param
* @return: result
*/
const arrayToTree = (arr, pno) => {
var tree = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i].pno === pno) {
var node = {
id: arr[i].id,
name: arr[i].name,
no: arr[i].no,
pno: arr[i].pno,
children: arrayToTree(arr, arr[i].no),
};
tree.push(node);
}
}
return tree;
};
9.非空判断
if (Reflect.has(config, 'data') && config.data && Object.keys(config.data).length > 0) {
...
} else {
...
}
10 类型判断
// 判断为obj
Object.prototype.toString.call(obj) === '[object Object]'
Object.prototype.toString.call(value) === '[object Function]'
Object.prototype.toString.call(value) === '[object string]'
Object.prototype.toString.call(value) === '[object Array]'
11. JSON 字符串转换
/**
* JSON 字符串转换
* @param str 转换的字符串
* @param defaultValue 默认值
* @returns
*/
export function parseJson<T = any>(str: string, defaultValue?: T): T {
if (str === null || str === undefined || str === "") {
return defaultValue;
}
try {
return JSON.parse(str);
} catch (error) {
return defaultValue;
}
}
12. 验证
/**
* 判断是否为IP
*/
export function isIp(s) {
return /^(((25[0-5]|2[0-4]\d|(1\d{2}|[1-9]?\d)).){3}(25[0-5]|2[0-4]\d|(1\d{2}|[1-9]?\d))|((25[0-5]|2[0-4]\d|(1\d{2}|[1-9]?\d)).){3}(25[0-5]|2[0-4]\d|(1\d{2}|[1-9]?\d))/(2[0-4]|1\d{1}|\d{1})|((25[0-5]|2[0-4]\d|(1\d{2}|[1-9]?\d)).){3}(25[0-5]|2[0-4]\d|(1\d{2}|[1-9]?\d))(,((25[0-5]|2[0-4]\d|(1\d{2}|[1-9]?\d)).){3}(25[0-5]|2[0-4]\d|(1\d{2}|[1-9]?\d)))+)$/.test(
s
);
}
/**
*
* @param {*} rule
* @param {*} value
* @param {*} callback
*/
export function validateIp(rule, value, callback) {
if (isIp(value)) {
callback();
} else {
callback("IP格式错误");
}
}
export function isValidIP(ip: string): boolean {
// 正则表达式用于匹配 IPv4 地址
const ipv4Regex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
// 正则表达式用于匹配 IPv6 地址
const ipv6Regex = /^([0-9a-fA-F]{1,4}:){7}([0-9a-fA-F]{1,4})$/;
// 验证 IP 地址
return ipv4Regex.test(ip) || ipv6Regex.test(ip);
}
/*验证内容是否英文数字以及下划线*/
export function validateEngOrNum(rule, value, callback) {
const reg = /^[_a-zA-Z0-9]+$/;
if (value == "" || value == undefined || value == null) {
callback();
} else {
if (!reg.test(value)) {
callback(new Error("英文字母、数字或下划线"));
} else {
callback();
}
}
}
/**
* 邮箱
* @param {*} s
*/
export const isEmail = (s: string): boolean => {
return /^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(
s
);
};
/**
* 手机号码
* @param {*} s
*/
export const isMobile = (s: string): boolean => {
return /^1[0-9]{10}$/.test(s);
};
/**
* 电话号码
* @param {*} s
*/
export const isPhone = (s: string): boolean => {
return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s);
};
/**
* URL地址
* @param {*} s
*/
export const isURL = (s: string): boolean => {
return /^http[s]?://.*/.test(s);
};
// 判断当前设备是否为移动端
export const isMobile = (): boolean => {
//const invoke = window.__TAURI__.invoke;
return /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent);
};
export function browsertype() {
const userAgent = navigator.userAgent //取得浏览器的userAgent字符串
let isOpera = false
if (userAgent.indexOf("Edge") > -1) {
return "Edge"
}
if (userAgent.indexOf(".NET") > -1) {
return "IE"
}
if (userAgent.indexOf("Opera") > -1 || userAgent.indexOf("OPR") > -1) {
isOpera = true
return "Opera"
} //判断是否Opera浏览器
if (userAgent.indexOf("Firefox") > -1) {
return "FF"
} //判断是否Firefox浏览器
if (userAgent.indexOf("Chrome") > -1) {
return "Chrome"
}
if (userAgent.indexOf("Safari") > -1) {
return "Safari"
} //判断是否Safari浏览器
if (
userAgent.indexOf("compatible") > -1 &&
userAgent.indexOf("MSIE") > -1 &&
!isOpera
) {
return "IE"
} //判断是否IE浏览器
}
