首页 > 其他分享 >vue+elementUI 实现内容区域高度自适应

vue+elementUI 实现内容区域高度自适应

时间:2023-01-09 14:59:35浏览次数:45  
标签:vue elementUI getHeight height 适应 window defaultHeight resize

//defaultHeight是绑定的属性
<el-main :style="defaultHeight">
<router-view />
</el-main>


//注意:这里的defaultHeight必须是对象,不懂的可以去官网看下api
data() {
return {
defaultHeight: {
height: ""
}
};
},
methods: {
//定义方法,获取高度减去头尾
getHeight() {
this.defaultHeight.height = window.innerHeight - 90 + "px";
}
},
created() {
//页面创建时执行一次getHeight进行赋值,顺道绑定resize事件
window.addEventListener("resize", this.getHeight);
this.getHeight();
}

 

 

 

原地址:https://www.cnblogs.com/jwen1994/p/13571720.html

标签:vue,elementUI,getHeight,height,适应,window,defaultHeight,resize
From: https://www.cnblogs.com/lt0222/p/17037020.html

相关文章

  • vue-awesome-swiper与vue2的版本对应关系
    1.安装  注意:这里一定要对应swiper 和vue-awesome-swiper版本,如果不对应,vue就会各种报错  2.引入2.1全局引入main.js  2.2局部引入    3......
  • 视频直播app源码,vue实现列表自动滚动的方式
    视频直播app源码,vue实现列表自动滚动的方式设置定时器,每三秒,让列表向上移动一行的高度,然后当最后一条数据出现时,在下一个三秒后,恢复到初始状态。 下面是上面描述的代码......
  • NETCORE + VUE + SignalR 消息通信
     NETCORE+VUE+SignalR消息通信  分组通信:https://blog.csdn.net/qbc12345678/article/details/125215711 一.创建Net6WebApi项目NETCORE.TSignalR1.......
  • 关于vue :style 的几种使用方式
    :style的使用一,最通用的写法 <p:style="{fontFamily:arr.conFontFamily,color:arr.conFontColor,backgroundColor:arr.conBgColor}">{{con.title}}</p>二,三元表......
  • Vue的hash/history模式
    hash路由模式URL中的hash值只是客户端的一种状态,向服务端发送请求的时候,hash部分不会被发送;hash值得改变会在浏览器的历史记增加访问记录,所以可以通过浏览器的回退......
  • vue3+vite2 vite.config.js 配置
    vite配置官方文档:https://cn.vitejs.dev/config/shared-options.html#base 开发服务器选项-serverserver:{//host:指定服务器应该监听哪个ip地址。如果设置为......
  • 【前端】js实现图片自适应
    一、问题分析既然要实现图片自适应,那就要对不同的图片尺寸进行分类处理,我最开始是分了5类    对于长宽都不超过的情况--应该不改变图片本身比例对于长宽都超......
  • vue2 element-ui组件二封-表单组件-按钮封装
    这里是一段我们公司过往项目的代码(增删改查项目中的查询/重置按钮)<el-button@click="query()"type="primary"size="mini"><iclass="el-icon-search">查询</i><......
  • vue2组件props;computed监控变量,watch执行方法
    props:{mesData:{type:Object,//接受父组件值required:true,},tableLod:{type:Function,......
  • vue项目部署到IIS服务器
    步骤一:复制文件把build之后的文件(dist文件夹)拷贝到IIS存放网站文件的目录步骤二:在IIS中新建站点步骤三:下载安装模块:urlrewrite传送门:https://www.iis.net/downloads/m......