前端笔记(近期整理的一些开发备注)

js点击下载文件

//点击下载文件写法
const w = window.open('about:blank');
w.location.href='文件url'

PC端中px转vw与vh，sass写法

//PC端 px转vwvh 写法 sass
@function px-vw($px) {
  @return $px*100/3840*1vw
}
@function px-vh($px) {
  @return $px*100/2160*1vh
}

sass实现纵向滚动条，并改变滚动条样式

//滚动条
height:300px;
overflow-x: hidden;
overflow-y: scroll;
&::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
/*定义滚动条轨道 内阴影+圆角*/
&::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
    border-radius: 10px;
}
/*定义滑块 内阴影+圆角*/
&::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
    background-color: #1890ff;
}

css实现竖条背景 内部百分比设置

//竖条背景
background-size:8px;
background-image: linear-gradient(90deg,#52e9ff 50%,#fff);

sass禁止文字换行 在新样式中引用样式

//禁止文字换行
.ellipsis{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

//引用样式class
@extend .ellipsis;

css改变鼠标指针为手型

//改变鼠标指针为手型
cursor: pointer;

css背景样式渐变为透明色

//背景颜色渐变 transparent
background-image: linear-gradient(90deg, red, transparent);

sass中修改引用了antd组件的样式

//sass修改antd样式
:global(.className){}

css取第一个子元素与取最后一个子元素

//css取第一个
&:nth-child{}
&:first-child{}
//css取最后一个
&:last-child{}

js保留一位小数

//保留1位小数
2.01.toFixed(1)