vue浏览器与body宽高获取

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" con

lxsm

6184人浏览 · 2020-05-18 14:45:31

lxsm · 2020-05-18 14:45:31 发布

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue浏览器与body宽高获取</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<style>
 body{border:10px solid red}
</style>
</head>
<body>
<div id="app">
 body宽度(不包括边线)：{{count1}}
 body高度(不包括边线)：{{count2}}
 body宽度(包括边线的宽)：{{count1_1}}
 body高度(包括边线的宽)：{{count2_2}}
 浏览器可视区域宽度：{{count3}}
 浏览器可视区域高度：{{count4}}
 屏幕分辨率的宽：{{count5}}
 屏幕分辨率的高：{{count6}}
 屏幕可用工作区宽度：{{count7}}
 屏幕可用工作区高度：{{count8}}
</div>
</body>
<script>
var vm = new Vue({
 el: '#app',
 data: {
 count1: document.body.clientWidth,
 count2:document.body.clientHeight,
 count1_1:document.body.offsetWidth,
 count2_2:document.body.offsetHeight,
 count3:document.documentElement.clientWidth,
 count4:document.documentElement.clientHeight,
 count5:window.screen.width,
 count6:window.screen.height,
 count7:window.screen.availWidth,
 count8:window.screen.availHeight
 },
 methods:{
 getScreenSize() {
 window.onresize = () => {
 this.count1 = document.body.clientWidth;
 this.count2 = document.body.clientHeight;
 this.count1_1 = document.body.offsetWidth;
 this.count2_2 = document.body.offsetHeight;
 this.count3 = document.documentElement.clientWidth;
 this.count4 = document.documentElement.clientHeight;
 this.count5 = window.screen.width;
 this.count6 = window.screen.height;
 this.count7 = window.screen.availWidth;
 this.count8 = window.screen.availHeight;
 };
 },
 },
 mounted: function() {
 this.getScreenSize();
 },
})
</script>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^