前端随笔

前言功能说明Vue3版本实现、css部分使用TailWind TODO: 有部分瑕疵，可继续优化。 1.支持控制行数 2.过渡动画使用 3.可改为插槽 实现<template> <div :class="[ `text-[${fontSize}px]`, 'overflow-hidden', 'transition-height duration-500 ease-in-out', (showSuspension && !expanded) ? 'suspension' : '' ]" :style="{ lineHeight: `${fontSize * props.lineHeightScale}px `, maxHeight: !expanded ? `${fontSize * maxLines * ...

1.动态计算dom宽高实现import { debounce } from 'lodash-es';import type { Directive, App } from 'vue';const map = new WeakMap();const resize = (entries: ResizeObserverEntry[]) => { entries.forEach((entry) => { const handler = map.get(entry.target); handler && handler(entry.contentRect); });};const debounceReize = debounce(resize, 50);const ob = new ResizeObserver(debounceReize);const resizeDirective: Directive = { moun ...

前言功能说明Vue3版本实现、css部分使用TailWind，同查看更多组件类似。Ant-Designe组件toolTips使用 1.支持控制行数 2.控制是否显示提示文本 实现<template> <div class="relative"> <a-tooltip :overlay-style="{ maxWidth: '80%' }" :get-popup-container="(triggerNode) => triggerNode.parentNode" trigger="click" > <template v-if="showTooltip && showSuspension" #title> <div style="max-height: 40vh; overflo ...

PartialPartial的作用是将类型T中的所有属性变为可选属性 type Partial<T> = { [P in keyof T]?: T[P];}; interface IAnimal { name: string age: number color: string}type MyPartial = Partial<IAnimal>// 转换结果：type MyPartial = { name?: string; age?: number; color?: string;} RequiredRequired作用是将所有属性变成必选属性 type Required<T> = { [P in keyof T]-?: T[P];}; ReadonlyReadonly作用是将所有属性变成只读属性 type Readonly<T> = { readonly [P in keyof T]: ...

1.Promise.allconst parallelRun = async max => { const requestSliceList = []; for (let i = 0; i < requestList.length; i += max) { requestSliceList.push(requestList.slice(i, i + max)); } for (let i = 0; i < requestSliceList.length; i++) { const group = requestSliceList[i]; try { const res = await Promise.all(group.map(fn => fn())); console.log('接口返回值为：', res); } catch (error) { console.error(error); } ...

实现类似于qs.stringify的功能，可用于post请求序列化方法一:const qsStringify = (obj) => { let result = []; for (let key in obj) { if (obj.hasOwnProperty(key)) { result.push(`${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`); } } return result.join('&');} 方法二const qsStringify =(obj) => { return Object.entries(obj).map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`). ...

过滤对象中 值为null 或undefined的属性1.filter && reducedelEmptyData(obj = {}) { const params = Object.keys(obj).filter(s => obj[s] !== null).reduce((acc, key) => ({ ...acc, [key]: obj[key] }), {}) return params }, 先filter处理值为null(可添加 && obj[s] !== undefined),再通过reduce传入初始{},回调循环将符合条件的属性和属性值合并到对象中，再返回一个新对象。 array.reduce((prev, cur, index, arr)=> { /***/}, initialValue)参数一： callback 函数（执行数组中每个值的函数，包含四个参 ...

Typescript&&JavaScript常用笔记数组map 循环遍历数组、返回一个新的数组forEach 循环遍历数组，不改变原数组push/pop 在数组的末尾添加/删除元素 改变原数组unshift/ shift 在数组的头部添加/删除元素，改变原数组join 把数组转化为字符串some 有一项返回为true，则整体为trueevery 有一项返回为true，则整体为falsefilter 数组过滤slice(start, end) 数组截取，包括开头，不包括截取，返回一个新的数组splice(start, number, value) 删除数组元素，改变原数组indexof/lastindexof： 查找数组项，返回对应的下标concat：数组的拼接，不影响原数组，浅拷贝sort：数组排序 改变原数组reverse： 数组反转，改变原数组 改变原数组的方法(9个):let a = [1,2,3]; ES5: a.splice()/ a.sort() / a.pop()/ a.shift()/ a.push()/ a.unshift ...

前端文件下载1.最简单直接的方式没有下载进度、不能鉴权、浏览器支持预览的不提供下载、url长度问题window.open('file')window.location.href = 'file' 2.a标签的download（浏览器兼容性良好、不支持跨域、不能鉴权）<a href="example.jpg" download>点击下载</a> 带上属性值，重命名下载文件名 <a href="example.jpg" download="test">点击下载</a> 检测是否支持download const isSupport = 'download' in document.createElement('a'); 3.Blob对象下载它除了能利用已知文件地址路径进行下载外，还能通过发送ajax请求api获取文件流进行下载/** * 下载文件 * @param {String} ...

一、常见问题1.git commit 后 想撤销commit （回退版本 未push到远程仓库）git add .git commit -m 'fix: 工单问题修复'git reset --soft HEAD^ // 撤回commit 代码仍然保留 HEAD ： 上一个版本 提交了两个commit 撤回 HEAD^^ –mixed 不删除工作空间改动代码，撤销commit，并且撤销git add . 操作 –soft 不删除工作空间改动代码 撤销commit 不撤销git add . 操作 –hard 删除工作空间改动代码 撤销commit 撤销git add 相当于恢复到上一次commit状态 修改commit 注释： git commit -amend 2.git 版本回退操作 （已commit 并push到远程仓库)git loggit reset --hard commit_idgit push -f // 强制推送 不推荐此方法 git loggit revert commit_id// 修改commit 信息git push 二、git ...