MC_mc
前端
获得徽章 0
- 【下载文件流】
<说明>：
header中需添加responseType: "blob"
<方法>：
function downloadFileBlob(content, fileName) {
const blob = new Blob([content]);
if ("download" in document.createElement("a")) {
// 非IE下载
const elink = document.createElement("a");
elink.download = fileName;
elink.style.display = "none";
elink.href = window.URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
window.URL.revokeObjectURL(elink.href);
// 释放URL 对象
document.body.removeChild(elink);
} else {
// IE10+下载
navigator.msSaveBlob(blob, fileName);
}
}展开赞过 21 - 【requestAnimationFrame计时器】
function getRequestAnimation() {
const win: any = window
const requestAnimationFrame =
win.requestAnimationFrame ||
win.mozRequestAnimationFrame ||
win.webkitRequestAnimationFrame ||
win.msRequestAnimationFrame
const cancelAnimationFrame = win.cancelAnimationFrame || win.mozCancelAnimationFrame
let myAnimationRequest: any
function requestAnimation(callback: () => void, time: number) {
let i = 1
myAnimationRequest = requestAnimationFrame(function fn() {
// 计数器% （60/1秒钟执行的次数）
const value = (60 / (1000 / time)).toFixed(0)
if (i % parseFloat(value) === 0) {
callback()
}
i++
myAnimationRequest = requestAnimationFrame(fn)
})
}
function cancelAnimation() {
if (myAnimationRequest) {
cancelAnimationFrame(myAnimationRequest)
myAnimationRequest = null
}
}
return {
requestAnimation,
cancelAnimation,
}
}展开评论点赞 - ===CSS：linear-gradient===
【说明】：
linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。
【例子】：
1）渐变轴45度，从红色渐变到蓝色
background: linear-gradient(45deg, red, blue);
2）从上到下，从50%开始渐变，颜色从红色到蓝色
background: linear-gradient(to bottom, red, red 50%, blue);
3）将红色与蓝色的颜色转换中点移动到30%的位置
background: linear-gradient(red 10%, 30%, blue 90%);
4）如果多个颜色终止在同一位置，则第1个颜色与最后1个颜色的过渡将是一条生硬线
background: linear-gradient(red 50%, blue 50%);
5）从左到右，从完全透明渐变到完全不透明的红色
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
6）允许颜色多个颜色终止位置。（以下三个等价）
background: linear-gradient(red 0%, yellow 50%, yellow 70%, green 90%, green 100%);
background: linear-gradient(red, yellow 50% 70%, green 90%);
background: linear-gradient(red 0%, yellow 50% 70%, green 90% 100%);
7）允许多个linear-gradient
background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);展开评论点赞 - 1.===JS：判断是否是数字===
function isNumber(value?: any): value is number {
return typeof value === "number" && !Number.isNaN(value)
}
2.===JS：是否无效值（null,undefined,NaN判断）===
function isInvalid(value?: any) {
return (
(typeof value === "number" && Number.isNaN(value)) ||
value === null ||
value === undefined
)
}展开评论点赞 - 1.===React：对遍历组件绑定ref===
const Template = (props: any) => {
const mapRef = useRef<any>({})
// 获取各个组件的值
const handleClick = useCallback(() => {
let data = {}
for (let item of list) {
data[item.key] = mapRef.current?.[item.key]?.getValues()
}
console.log("data:", data)
}, [])
return (
<div>
{list.map((item) => (
<SubComponent
className="test"
key={item.key}
ref={(el) => (mapRef.current[item.key] = el)}
/>
))}
<button onClick={handleClick}>获取各个组件的值</button>
</div>
)
}
export default Template
2.===JS：复制单行内容到剪贴板===
function copyToClip(content: string) {
let input = document.createElement("input")
input.setAttribute("value", content)
document.body.appendChild(input)
input.select()
document.execCommand("copy")
document.body.removeChild(input)
message.success("已复制内容到剪贴板")
}展开评论点赞 - 1.====JS：四舍五入到千位，不足千位的四舍五入到百位===
function roundToThousands(num) {
if (typeof num === "number" && !Number.isNaN(num)) {
if (num >= 1000) {
return Math.round(num / 1000) * 1000
} else if (num > 0) {
return Math.round(num / 100) * 100
} else {
return 0
}
} else {
return num
}
}
2.====JS：计算文本高度===
function getTextHeight() {
let p = document.createElement("p")
p.textContent = "文本内容"
if (window.getComputedStyle) {
document.body.appendChild(p)
let height = parseFloat(window.getComputedStyle(p).height)
document.body.removeChild(p)
return height
} else {
return null
}
}展开赞过 评论1 - 1.===JS：滚动条滚动到顶部===
【方法1】：
document.getElementById("某个DOM的id").scrollTo({ top: 0, behavior: "smooth" });
【方法2】：
document.getElementById("某个DOM的id").scrollTop = 0;
2.====JS：判断滚动条在底部===
公式：scrollHeight + scrollTop >= contentHeight
scrollHeight：容器高度。
contentHeight：内容高度。
scrollTop：滚动条向下滚动的距离，也就是元素顶部被遮住部分的高度。
3.====JS：获取兄弟元素===
【上一个】：
previousSibling：获取元素的上一个兄弟节点（包含元素节点、文本节点、注释节点即回车、换行、空格、文本等）
previousElementSibling：获取上一个兄弟元素节点（只包含元素节点）
【下一个】：
nextSibling
nextElementSibling
4.====JS：通过子级id向上找到所有的父级id===
function find(
array: { id: string; name: string; children?: any },
id: string
) {
let stack = []
let going = true
let walker = (array, id) => {
array.forEach((item) => {
if (!going) return
stack.push(item["id"])
if (item["id"] === id) {
going = false
} else if (item["children"]) {
walker(item["children"], id)
} else {
stack.pop()
}
})
if (going) stack.pop()
}
walker(array, id)
return stack.join(",")
}展开赞过 11 - 1.===CSS：让文本无法被选中===
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
2.===CSS：绘制线条===
【说明】：
绘制一条水平线，左边端点距离左边屏幕100px，右边端点距离右边屏幕100px，自适应长度
【代码】：
.line {
height: 1px;
background-color: #fff;
position: absolute;
left: 100px;
right: 100px;
}
3.===JS：保留数字去除文本的单位===
parseInt("500px"); // 500
4.===GitHub：classnames===
【说明】：
一个简单的 JavaScript 实用程序，用于有条件地将 classNames 连接在一起。
【引入】：
import classNames from "classnames"
【使用】：
classNames ( 'foo' , 'bar' ) ; // => 'foo bar'
classNames ( 'foo' , { bar : true } ) ; // => 'foo bar'
classNames ( { 'foo-bar' : true } ) ; // => 'foo-bar'
classNames ( { 'foo-bar' : false } ) ; // => ''
// 许多不同类型的参数
classNames ( 'foo' , { bar : true , duck : false } , 'baz' , { quux : true } ) ; // => 'foo bar baz quux'
// 其他假值只是被忽略
classNames ( null , false , 'bar' , undefined , 0 , 1 , { baz : null } , '' ) ; // => 'bar 1'展开赞过 评论1 - 1.===CSS：transform===
【说明】：
CSS transform属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。
【取值说明】：
1）transform属性可以指定为关键字值none 或一个或多个<transform-function>值。
2）要应用的一个或多个CSS变换函数。变换函数按从左到右的顺序相乘，这意味着复合变换按从右到左的顺序有效地应用。
【取值】：
1）旋转
transform: rotate(45deg); // 方向顺时针
2）缩放
transform: scale(0.5, 2); // 水平方向缩小一半，垂直方向放大一倍。
3）倾斜
transform: skew(30deg，30deg); //水平方向倾斜30度，垂直方向倾斜30度
transform: skew(30deg); // 只在水平方向进行倾斜，垂直方向不倾斜
4）移动
transform: translate(50px, 50%); // 水平方向移动50px，垂直方向移动50%
transform: translate(50px); // 只在水平方向移动，垂直方向不移动
5）矩阵
transform: matrix(a,b,c,d,e,f);
transform: matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1);
2.===CSS：transform-origin===
【说明】：
CSS属性，让你更改一个元素变形的原点。
【默认值】：
50% 50% 0
【取值说明】：
1）一个值：
必须是<length>，<percentage>，或 left, center, right, top, bottom关键字中的一个。
2）两个值：
其中一个必须是<length>，<percentage>，或left, center, right关键字中的一个。
另一个必须是<length>，<percentage>，或top, center, bottom关键字中的一个。
3）三个值：
前两个值和只有两个值时的用法相同。
第三个值必须是<length>。它始终代表Z轴偏移量。展开评论点赞 - 1.===Ant Design：去除Table组件的“取消排序”===
【sorter状态】：
点击升序、点击降序、取消排序
【sortDirections属性】
sortDirections: ['ascend' | 'descend']改变每列可用的排序方式，切换排序时按数组内容依次切换，设置在 table props 上时对所有列生效。
【方法】：
可以通过设置sortDirections: ['ascend', 'descend', 'ascend'] 禁止排序恢复到默认状态。
【注意】：
需要设置排序的默认值defaultSortOrder: 'ascend' 或者 'descend'展开评论点赞