前端临时笔记

图片剪切

width: 100%;
height: 100%;
object-fit: cover;

超出省略号显示

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

字符数字字母换行

word-break: break-all;

input placeholder 样式设置

.search-box input::-webkit-input-placeholder {}

/_ 使用 webkit 内核的浏览器 _/
.search-box input:-moz-placeholder {}

/_ Firefox 版本 4-18 _/
.search-box input::-moz-placeholder {}

常用获取网页文档尺寸 api

网页可见区域宽： document.body.clientWidth--------- window.innerHeight
网页可见区域高： document.body.clientHeight----------window.innerWidth
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth
boxWidth = box.getBoundingClientRect().width
boxWidth1 = window.getComputedStyle(box).width

e.target e.current

  获得点击元素的前一个元素
 #e.currentTarget.previousElementSibling.innerHTML
 #获得点击元素的第一个子元素
 e.currentTarget.firstElementChild

# 获得点击元素的下一个元素
e.currentTarget.nextElementSibling

# 获得点击元素中id为string的元素
e.currentTarget.getElementById("string")

# 获得点击元素的string属性
e.currentTarget.getAttributeNode('string')

# 获得点击元素的父级元素
e.currentTarget.parentElement

# 获得点击元素的前一个元素的第一个子元素的HTML值
e.currentTarget.previousElementSibling.firstElementChild.innerHTML

跳转

window.location.href='http://www.baidu.com'跳转到百度

一次引入同一文件路径下的模块

const cont = require.context(‘./menu’, true, /.js$/);
const arr = cont.keys().map(item => cont(item).default)

三个参数

1. 要引入模块所在的文件地址
2. 是否查询子文件夹
3. 一个正则表达式,用来确定查询的是什么文件
   require.context()返回的是一个函数,该函数可以根据一个路径,解析出来该路径包含的模块信息

该返回函数有三个属性
1.keys 他是一个方法,还方法执行完毕以后,返回一个包含所有查找文件路径的数组
2.id 返回模块的 id
3.resolve 也是一个方法,返回 require 解析后的得到的模块 id

mockjs

使用

rem布局页头

<meta name="viewport" content="width=device-width,initial-scale=1,
minimum-scale=1,maximum-scale=1,user-scalable=no" />

vue中使用 scss

安装一下模块

“dart-sass”: “^1.25.0”,
“sass-loader”: “^7.3.1”,
“style-loader”: “^3.2.1”,

“dart-sass”: “^1.25.0”,
“sass”: “^1.37.5”,
“sass-loader”: “^10.0.1”,
“style-loader”: “^3.2.1”,

vue 中配置跨域

根目录建立 config.js 文件

//要访问的地址 http://localhost:4000/user

module.exports = {
devServer: {
proxy: 'http://localhost:4000’配置
}

}
访问时不再写 http://localhost:4000

axios.get(/user)