关于VUE网页内容大小随浏览器大小动态调整

最新推荐文章于 2023-05-23 15:07:32 发布
最新推荐文章于 2023-05-23 15:07:32 发布
阅读量1.7k 收藏 11
点赞数 1
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44275692/article/details/122432870
版权

全局注册动态获取屏幕大小
1.mian.js入口文件
这里插入图片描述
2.需要的主页面，我这里是home.vue
VUE页面绑定样式 ： :style="{height: screenHeight}"
在这里插入图片描述
data里需要对应赋值
在这里插入图片描述

methods
在这里插入图片描述
mounted
在这里插入图片描述
destroyed
在这里插入图片描述

PS：至于减去70 是什么意思，如下图
在这里插入图片描述
假设，Header + Footer 总高度是70px；我需要的是Main动态调整，我就需要在获取整个页面高度的时候将这俩的总高度减去，就是我的Main的实际高度

是鸡蛋不是鸭蛋
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中处理echarts因v-if切换后图形显示异常+实现echarts监听窗口变化而改变大小
winne雪
11-12 3767
一、处理echarts因v-if切换后图形显示异常 有时候我们需要在一个页面中使用v-if来显示不同的两个图表。 视觉效果上好像是从一个页面点击链接跳转到另一个页面，但其实原理是通过销毁和重建两个不同dom容器来实现这个效果。 可能会出现的问题: 在切换到另一个图表显示的时候，改变了窗口宽度高度，那么点击返回按钮时看到原先的echarts图形就会有一部分消失显示不完整了。 解决办法： 我们需要在返...
Vue3 echarts 图表跟随窗口自适应大小
m0_56153940的博客
02-23 4097
<template> <div class="box"> <Breadcrumb name="数据统计"/> <el-card> <div ref="echartsRef" id="main" :style="`height:${$attrs.height || 400}px;width:${$attrs.width + 'px' || '70%'} 800px; `"></div> &.
vue监听浏览器窗口的变化，随着窗口变化调整里面table的宽高
weixin_30414245的博客
10-24 456
1.在data中设置： 1 tableHeight:"500", 2 screenHeight:window.innerHeight, 2.在mounted中设置： 1 mounted() { 2 const that = this 3 window.onresize =() =>{ 4 return (()=&gt...
Vue 项目随着浏览器屏幕大小自适应问题
m0_73154039的博客
05-23 612
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸
热门推荐
guoxuhan的博客
02-01 3万+
需求： 1. 页面部分元素的尺寸需要根据实际打开时浏览器尺寸进行设置； 2. 页面打开后，调节浏览器窗口大小时需要动态调节部分元素的尺寸； 需要注意的点： window.onresize只能在项目中一处进行引用触发，如果在多个地方进行引用触发，会导致只有1个触发事件生效。 解决“多个组件都需要触发”的方案只能是通过一个地方触发后通过组件间通信进行触发。 (以调节class为myD
Vue 项目 控制页面内 div 根据浏览器窗口大小自适应高度
PorkCanteen的博客
11-27 3630
做项目时遇到以下问题： 在页面顶部、底部组件高度固定的情况下，如何实现中间内容区域盒子根据浏览器窗口大小自适应高度 解决方案如下 // 定义方法，获取浏览器窗口高度 methods: { getDivHeight() { const screenheight = window.innerHeight this.$refs.mainDiv.style.height = screenheight - 704 + 'px' // 704 为 头部组件高度 + 底部组件高度 /
vue监听dom大小改变案例
10-15
文档还提到了在Vue中使用echarts图表时，如何根据容器的大小变化调整图表的大小。这同样需要监听DOM元素的尺寸变化，当变化发生时，可以动态调整图表的尺寸以适应新的容器大小。这通常涉及到重新初始化图表实例，并...
vue终极解决多个页面Echart随页面窗口大小而改变图形大小方法
09-03
然而，当遇到多个ECharts图表分布在多个页面上，并且需要根据浏览器窗口大小动态调整图形尺寸时，可能会遇到一些挑战。本文将详细介绍一种终极解决方案，确保每个页面上的ECharts图表都能正确响应窗口尺寸的变化。 ...
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
01-19
2. 页面打开后，调节浏览器窗口大小时需要动态调节部分元素的尺寸； 需要注意的点： [removed]只能在项目中一处进行引用触发，如果在多个地方进行引用触发，会导致只有1个触发事件生效。 解决“多个组件都需要触发...
vue-resize-text：vue指令，可根据元素宽度自动调整字体大小
02-05
Vue调整文字大小 Vue指令可根据元素宽度自动调整字体大小。 它使字体大小在灵活或响应式布局上具有灵活性。 ：调整浏览器视口的大小以查看实际效果 安装 通过NPM安装 $ npm install vue-resize-text --save 通过...
vue-image-converter:转换图像并调整其大小
05-14
Vue-image-converter将图像转换和调整大小的功能封装成独立的Vue组件，可以方便地在项目中复用。组件内部包含了对图像处理的具体逻辑，并可以通过属性传递参数，如原始图像URL、目标尺寸等。 2. **图像处理**：Vue-...
基于jquery的获取浏览器窗口大小的代码
10-28
在实际开发中，获取窗口尺寸通常用于响应式设计，确保网页元素能够适应不同大小的屏幕和浏览器窗口，从而提升用户体验。例如，当窗口大小变化时，可能需要调整图片的大小、改变布局的样式或者重新计算某些元素的位置...
Vue实现浏览器打印功能的代码
11-20
在Vue.js框架中实现浏览器打印功能，通常是为了满足在web应用中进行报表或者文档的打印需求。这个场景中，我们使用了一个名为`vue-easy-print`的插件，它简化了在Vue项目中调用本地打印机的过程。以下是实现这一功能...
Vue的自动调整大小输入字段-JavaScript开发
05-26
Vue的自动调整大小输入字段Vue-autosize-input Vue的文本输入，可将其自身调整为当前内容的大小。 演示和示例实时演示：houjiazong.github.io/vue-autosize-input要在本地运行示例，请运行：yarn install yarn serve...
vue-grid-layout：Vue.js的可拖动和可调整大小的网格布局
02-06
可调整大小的小部件 静态小部件 边界检查以进行拖动和调整大小 可以在不重建网格的情况下添加或删除小部件 布局可以序列化和还原 自动RTL支持（调整大小无法在2.2.0上使用RTL） React灵敏 当前版本： 2.3.12（支持...
vue 配置移动单位转换插件 postcss-px-to-viewport
weixin_44112924的博客
08-29 2328
vue3.0 配置移动单位转换插件 postcss-px-to-viewport 在vue.config.js文件中配置： css: { loaderOptions: { postcss: { plugins: [ require("postcss-px-to-viewport")({ ...
vue div 在不同浏览器会超出显示_基于 Vue 的商品主图放大镜方案
weixin_39870092的博客
12-12 171
本文首发于政采云前端团队博客：基于 Vue 的商品主图放大镜方案https://www.zoo.team/article/vue-item-magnifier前言 在做电商类应用时，难免会遇到商品主图实现放大镜效果的场景，现有的基于Vue的第三方包不多并且无法直接复用，今天，我来分享一种高稳定性的基于Vue的图片放大镜方法。实现原理 放大镜的原理用一句话概括，就是根据小图上的鼠标位置去定...
Vue大屏可视化自适应（可预览）
派大星的博客
09-22 6920
autoResize.js Resize.vue 最后在需要用的地方引入(页面中正常使用px即可) 查看demo
vue项目PC端窗口大小自适应
weixin_45168482的博客
08-19 3113
一、npm安装依赖 项目基础配置使用 vue-cli 生成 自适应方案核心： 阿里可伸缩布局方案 lib-flexible px转rem：px2rem，它有webpack的loader px2rem npm i lib-flexible -S cnpm install postcss-px2rem --save 二、在vue.config.js配置，这是按照1920*1080缩放 css: { loaderOptions: { postcss: { plug
vue 适配浏览器窗口大小
最新发布
06-01
在Vue中，可以使用`window`对象的`resize`事件来监听浏览器窗口大小的变化，并根据窗口大小调整组件的样式。 首先，你需要在Vue组件的`mounted`生命周期钩子中添加一个事件监听器： ```vue <template> <div class="my-component"> <!-- 组件内容 --> </div> </template> <script> export default { name: 'MyComponent', mounted() { window.addEventListener('resize', this.handleResize) }, methods: { handleResize() { // 处理窗口大小变化的逻辑 } } } </script> ``` 在`handleResize`方法中，你可以根据窗口大小调整组件的样式。例如，你可以使用`window.innerWidth`和`window.innerHeight`属性获取窗口的宽度和高度，然后针对不同的窗口大小调整样式。 ```vue <template> <div :style="containerStyle" class="my-component"> <!-- 组件内容 --> </div> </template> <script> export default { name: 'MyComponent', data() { return { containerStyle: { fontSize: '16px' } } }, mounted() { window.addEventListener('resize', this.handleResize) this.handleResize() }, methods: { handleResize() { if (window.innerWidth <= 600) { this.containerStyle.fontSize = '14px' } else { this.containerStyle.fontSize = '16px' } } } } </script> ``` 在这个例子中，组件的容器样式根据窗口大小动态调整了字体大小。当窗口宽度小于等于600px时，字体大小为14px，否则为16px。 当组件销毁时，你需要记得移除窗口大小变化的事件监听器，以避免内存泄漏。 ```vue <script> export default { name: 'MyComponent', mounted() { window.addEventListener('resize', this.handleResize) }, beforeDestroy() { window.removeEventListener('resize', this.handleResize) }, methods: { handleResize() { // 处理窗口大小变化的逻辑 } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值