【Vue】获取页面窗口宽度高度

最新推荐文章于 2024-09-27 21:51:57 发布

逍遥在南方

最新推荐文章于 2024-09-27 21:51:57 发布

阅读量8k

点赞数 3

分类专栏：前端 Vue JavaScript 文章标签： html vue.js javascript

本文链接：https://blog.csdn.net/Ruaki/article/details/118494749

版权

前端同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

Vue

5 篇文章 0 订阅

订阅专栏

JavaScript

5 篇文章 0 订阅

订阅专栏

Vue中获取页面窗口高度宽度

  mounted() {
    window.onresize = function () {
      console.log("宽度", document.documentElement.clientWidth);
      console.log("高度", document.documentElement.clientHeight);
    };
  },

效果

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

逍遥在南方

关注关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue获取屏幕的实时宽度 / 高度

南七小僧的学海无涯

08-26

851

获取屏幕的宽度和高度适用于。

vue.js获取body高度

06-23

336

的高度，并将其存储在Vue实例的数据对象中。然后，我们可以在模板中使用这个值来显示或渲染内容。如果需要在窗口大小改变时更新高度，我们可以添加一个事件监听器来监听。事件，并在事件触发时更新数据。最后，在组件销毁前，我们移除事件监听器，防止内存泄漏。在上述示例中，我们首先在。

参与评论您还未登录，请先登录后发表或查看评论

vue中怎么获得浏览器窗口的高度

m0_68094390的博客

05-20

3549

在mounted钩子函数中添加resize事件监听器，并在事件回调函数中调用getWindowHeight方法来获取窗口高度并赋值给组件的windowHeight属性，在模板中展示窗口高度。在beforeDestroy钩子函数中移除resize事件监听器，以防止组件销毁时内存泄漏。可以使用JavaScript中的window对象来获取浏览器窗口的高度，然后在Vue中使用。

JS---获取浏览器可视窗口的尺寸

热门推荐

那拉的博客

07-07

4万+

1.data中定义 curHeight:0,//当前所需屏幕高度 /**获取屏幕高度 */ beforeMount() { var h = document.documentElement.clientHeight || document.body.clientHeight; var curHeight = h

Web前端之JavaScript与Vue获取屏幕宽高、元素宽高、距离、位置、document、window、screen、client、offset、scroll、avail

CSDN博客主页地址：https://mengjian.blog.csdn.net/

11-12

1万+

Web前端之JavaScript与Vue获取屏幕宽高、元素宽高、距离、位置、document、window、screen、client、offset、scroll、avail

vue项目动态获取窗口以及元素宽高

文龙刚的博客

11-18

7776

vue项目动态获取窗口以及元素宽高

vue获取到页面的高度_vue 获取动态元素高度

weixin_39538877的博客

12-19

3920

2017.10.25凌晨坑死了~因为要在页面中搞一个区域用来scroll列表，所以必须要获取scroll-wrap的高度，于是想尽办法获取swipe、navbarBox的高度我在mounted里写百度上找到的方法，都没用。。。这是别人成功例子，但是我不成功。。。。在vue2.0里，如何获取dom元素的样式(样式是动态变化的)nextTick试过，querySelector试过但就是this.$re...

vue 计算页面高度

weixin_44134816的博客

04-25

788

【代码】vue 计算页面高度。

vue实时获取页面的宽度，自适应屏幕

weixin_54666101的博客

12-17

620

data(){ return{ fullWidth:document.documentElement.clientWidth } }, created(){ window.addEventListener('resize', this.handleResize) }, beforeDestroy: function () { window.removeEventListener('resize', this.handleResize) },

vue获取当前窗口的高度赋值给class或者id

2401_84153177的博客

05-14

107

<cube-swipe @item-click=“onItemClick”@btn-click=“onBtnClick” :data=“swipeData”>

vue禁止缩放浏览器窗口大小

07-16

### 回答1：在Vue中，禁止缩放浏览器窗口大小有几种方法可以实现。第一种方法是通过CSS样式来禁止缩放。在HTML文件的`<head>`标签内，可以添加以下CSS样式代码： ```css <style> body { zoom: reset !important; -moz-transform: scale(1) !important; -moz-transform-origin: top left !important; -o-transform: scale(1) !important; -o-transform-origin: top left !important; -webkit-transform: scale(1) !important; -webkit-transform-origin: top left !important; } </style> ``` 上述代码中，`zoom`属性用于禁止缩放，`transform`属性用于重置缩放，并通过`!important`规定样式的优先级。第二种方法是在Vue组件中使用JavaScript来禁止缩放。在Vue组件的`<script>`标签内，可以添加以下代码： ```javascript mounted() { window.addEventListener('resize', this.handleResize); }, methods: { handleResize() { window.resizeTo(window.innerWidth, window.innerHeight); } }, beforeDestroy() { window.removeEventListener('resize', this.handleResize); } ``` 上述代码中，`mounted`钩子函数用于在组件挂载时添加窗口缩放事件监听器，`handleResize`方法用于重新设置浏览器窗口大小为当前窗口大小。需要注意的是，以上两种方法可能会因为浏览器的安全策略而被禁用，所以在实际开发过程中，建议综合考虑用户体验和浏览器安全性，并根据实际需求选择合适的方法来禁止缩放浏览器窗口大小。 ### 回答2：在Vue中禁止缩放浏览器窗口大小需要通过一个简单的CSS样式来实现。首先，我们可以选择在Vue组件的根元素上添加以下样式： ```css <style> html, body { overflow: hidden; } </style> ``` 在上述代码中，我们将根元素的html和body标签的overflow属性都设置为hidden，这将禁止用户对整个窗口进行任何缩放操作。此外，如果我们只想禁止水平或垂直方向的窗口缩放，可以将overflow-x或overflow-y属性值设置为hidden。例如，如果我们只想禁止水平缩放，可以将样式修改如下： ```css <style> html, body { overflow-x: hidden; } </style> ``` 需要注意的是，以上样式只是在Vue组件中禁止窗口缩放的一种方法。如果我们需要在整个网页中禁止窗口缩放，可以在全局CSS文件或HTML文件中使用相同的样式。最后，需要提醒的是，虽然可以通过这种方式禁止窗口缩放，但这可能会违反用户体验的原则。因此，在实际应用中，我们应该慎重考虑是否真的需要禁止窗口缩放，并根据具体情况进行权衡。 ### 回答3：要禁止缩放浏览器窗口大小，可以使用CSS样式和Vue的指令来实现。首先，在Vue组件的模板中，添加一个元素作为容器来包裹内容，可以使用一个div元素，并给它一个唯一的id标识，例如"app"。接下来，在Vue组件的样式中，使用CSS样式来设置这个容器的宽度和高度，并将"overflow"属性设置为"hidden"，这样就可以阻止浏览器的滚动条出现。可以在Vue组件的style标签中添加如下样式： ``` <style> #app { width: 100%; height: 100%; overflow: hidden; } </style> ``` 最后，使用Vue的指令来动态绑定这个容器的大小，以使其与浏览器窗口大小保持一致。可以在Vue组件的script标签中添加如下代码： ``` <script> export default { mounted() { window.addEventListener('resize', this.handleResize); this.handleResize(); }, methods: { handleResize() { const app = document.getElementById('app'); app.style.width = window.innerWidth + 'px'; app.style.height = window.innerHeight + 'px'; } }, destroyed() { window.removeEventListener('resize', this.handleResize); } } </script> ``` 上述代码中，我们通过监听"resize"事件来调用handleResize方法，并在组件挂载时添加事件监听器。在handleResize方法中，我们获取到容器的DOM元素，并将其宽度和高度设置为浏览器窗口的宽度和高度。同时，在组件销毁时，移除事件监听器。通过以上方法，我们就可以禁止缩放浏览器窗口大小，并且保持Vue组件与浏览器窗口的大小一致。