项目实用方法

关于项目中的实用方法或技巧

wujiawen 发布于

阅读量

关于项目中的实用方法或技巧

记录一下，在项目页面中的一些实用方法或技巧，让写出来的页面更加优雅健壮

window.onresize

可以使用 window.onresize 事件监控浏览器窗口，当窗口或框架被调整大小时会触发此事件

使用场景：

控制弹窗的大小

根据窗口的大小，设置不同的宽度或高度，让弹窗有更强的适应力，可以提高用户体验

使用示例 (Vue)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
mounted () {
  window.onresize = () => {
    this.width = this.initWidth()
  }
},
initWidth () {
  this.screenWidth = document.body.clientWidth
  if (this.screenWidth < 991) {
    return '95%'
  } else if (this.screenWidth < 1400) {
    return '70%'
  } else {
    return '1000px'
  }
}

几个电脑屏幕分界点

1
1024      1280      1366      1440      1680      1920

附带：获取浏览器的宽高

1
2
3
4
5
6
7
// 不包括滚动条和工具栏(f12)
document.body.clientWidth
document.body.clientHeight

// 以下包括有滚动条时的未见区域
document.body.scrollWidth
document.body.scrollHeight

获取屏幕宽高

1
2
3
4
5
6
7
// 屏幕实际宽高
window.screen.width
window.screen.height

// 屏幕可用宽高（比如不包括底部任务栏）
window.screen.availWidth
window.screen.availHeight