图片剪切
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)
三个参数
- 要引入模块所在的文件地址
- 是否查询子文件夹
- 一个正则表达式,用来确定查询的是什么文件
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)