Vue前端开发页面高/宽自适配 js中动态获取页面的高度和宽度
问题描述前端页面往往由于屏幕分辨率大小不一,导致样式错乱,使得在不同分辨率的电脑上,数据也因此变成乱成一堆.正常情况下显示条件宽度不够导致异常显示情况下(按钮被挤到下一行了)因此,计算table的高度时,就必须动态获取页面的高度和宽度js动态获取页面的高度和宽度<div id="css_page_adapter"><div style="width: 100%; min-widt
·
目录
问题描述
前端页面往往由于屏幕分辨率大小不一,导致样式错乱,使得在不同分辨率的电脑上,数据也因此变成乱成一堆.
正常情况下显示条件
宽度不够导致异常显示情况下(按钮被挤到下一行了)
因此,计算table的高度时,就必须动态获取页面的高度和宽度
Vue监听并动态获取页面的高度和宽度
先引入'element-resize-detector'监听页面元素宽度和高度变化
npm install element-resize-detector --save
main.js中引入'element-resize-detector'
//引入'element-resize-detector'监听页面元素宽度和高度变化
import elementResizeDetectorMaker from "element-resize-detector";
Vue.prototype.$watchSize = elementResizeDetectorMaker;
下面给一个我写好的栗子
非常快速的一个前端页面搭建
页面自适应通用模板(开发中创建新页面,直接复制粘贴下面的内容,改下id和组件名称即可)
如
模板代码
<template>
<div id="TemplateVue" ref="css_page">
<div class="css_page_adapter">
<div class="css_page_head" ref="css_page_head">
<div class="css_title">
<span class="css_title_text">{{ $t('模板页') }}</span>
</div>
<div class="css_page_condition" ref="page_area_condition">
<el-form :inline="true">
<el-form-item :label="$t('查询条件')">
<el-input v-model="condition.specId" clearable maxlength="32" :placeholder="$t('common.pleaseInput')"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="search" icon="el-icon-search">{{$t('common.query')}}</el-button>
</el-form-item>
<el-form-item>
<el-button @click="clearAll">{{ $t('common.clearAll') }}</el-button>
</el-form-item>
</el-form>
<div style="margin-bottom: 10px;margin-top: -5px">
<el-button icon="el-icon-plus" size="mini" @click="" type="primary">{{$t('common.add')}}</el-button>
<el-button type="success" size="mini" icon="el-icon-download" @click="">{{$t('common.dataExport')}}</el-button>
</div>
</div>
</div>
<div class="css_page_body" ref="css_page_body">
<el-table border
v-loading="loading"
:data="tableData"
ref="dataTabRef"
@selection-change=""
:height="getPageBodyHeight">
<el-table-column type="selection" :reserve-selection="true" width="50"></el-table-column>
<el-table-column prop="cla" :label="$t('列1')" show-overflow-tooltip></el-table-column>
<el-table-column prop="clb" :label="$t('列2')" show-overflow-tooltip></el-table-column>
<el-table-column prop="clc" :label="$t('列3')" show-overflow-tooltip></el-table-column>
<el-table-column prop="cld" :label="$t('列4')" show-overflow-tooltip></el-table-column>
<el-table-column prop="cle" :label="$t('列5')" show-overflow-tooltip></el-table-column>
<el-table-column prop="clf" :label="$t('列6')" show-overflow-tooltip></el-table-column>
</el-table>
</div>
<div class="css_page_bottom" ref="css_page_bottom">
<el-checkbox v-model="selectBottom" style="float: left;margin-top: 10px;margin-left: 15px"
@change="selectAllBottom()">{{$t('common.selectAll')}}
</el-checkbox>
<el-pagination
background
style="float: right;margin: 2px 0 0 0"
@size-change="listPageData(1)"
@current-change="listPageData"
:current-page.sync="pagination.page"
:page-size.sync="pagination.pageSize"
:total="pagination.total"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
</div>
</div>
</div>
</template>
<script>
import PageHeader from '@/components/pageBackHeader/PageHeader';
export default {
name: "TemplateVue",
components: {PageHeader,},
data() {
return {
condition: {
specId: null,
},
queryCondition: {},
tableData: [],
pagination: {
page: 1,
pageSize: 20,
total: 0
},
loading:false,
otherHeight:0,
pageHeight:0,
selectBottom: false,
}
},
activated() {
},
created() {
this.search();
},
mounted() {
this.watchSize();
},
watch:{
'$route'(val, oldVal) {
if (val.path === '/template_vue') {
this.search();
}
},
},
computed: {
getPageBodyHeight() {
// console.log('计算结果:',this.pageHeight - this.otherHeight);
return this.pageHeight - this.otherHeight;
},
},
methods: {
search() {
Object.assign(this.queryCondition, this.condition);
this.listPageData(1);
},
listPageData(page) {
const paginationData = {
page: page,
pageSize: this.pagination.pageSize,
};
Object.assign(paginationData, this.queryCondition);
console.log("查询参数-paginationData",paginationData)
// this.loading=true;
//发送请求
// this.loading=false;
},
clearAll(){
this.condition.specId = null;
},
//页面适配
watchSize() {
const _this = this;
// 监听页面宽/高变化
_this.$watchSize().listenTo(this.$refs.css_page, (element) => {
_this.adapterPageHeight(_this)
});
// 监听头部(条件)宽/高变化
_this.$watchSize().listenTo(this.$refs.css_page_head, (element) => {
_this.adapterPageHeight(_this)
});
},
adapterPageHeight(_this){
// var width = element.offsetWidth;
// var height = element.offsetHeight;
_this.$nextTick(() => { // 这里填写监听改变后的操作
// this.pageHeight = document.getElementById("TemplateVue").offsetHeight; //js写法
// this.pageHeight = document.getElementById("TemplateVue").clientHeight; //js写法
this.pageHeight = this.$refs.css_page.offsetHeight;
var css_page_head = this.$refs.css_page_head.offsetHeight;
var css_page_bottom = this.$refs.css_page_bottom.offsetHeight;
this.otherHeight = css_page_head + css_page_bottom + 15;
// console.log('调整后:',this.otherHeight)
});
},
handleSizeChange(val){
this.pagination.pageSize = val;
this.pagination.page = 1;
this.search();
},
handleCurrentChange(val){
this.pagination.page = val;
this.search();
},
selectAllBottom() {
if (this.selectBottom){
//全选
// this.$refs['binStockTable'].toggleAllSelection();
}else {
//取消
// this.$refs['binStockTable'].clearSelection();
}
},
}
}
</script>
<style lang="scss" scoped>
#TemplateVue {
overflow-y: hidden;
width: 100%;
height: 100%;
.css_page_adapter{
width: 100%;
min-width: 1000px;
.css_page_head{
margin-top: 5px;
.css_title{
padding-bottom: 10px;
border-bottom: #e9e9e9 1px solid;
.css_title_text {
margin-left: 1%;
font-size: 20px;
padding: 5px 10px;
border: 4px none #0097FE;
border-left-style: solid;
/*color: #A9A9A9;*/
color: #000000;
}
}
.css_page_condition{
margin-top: 15px;
}
}
.css_page_body{
}
.css_page_bottom {
height: 35px;
background-color: #e7e5e5;
border: 1px solid #dcd5d5;
}
}
}
</style>
js动态获取页面的高度和宽度
两种方式动态获取div的高度(宽度也是一样的,值还是有区别的,详细区别可以自己查下)
offsetHeight 和 clientHeight
div上首先需要定义一个id,再根据id获取
<div id="css_page_adapter">
<div style="width: 100%; min-width: 1300px;">
<span>页面模板</span>
<span>内容区域</span>
</div>
</div>
获取
JS动态获取div的宽度:
var element = document.getElementById("css_page_adapter");
var width= element.clientWidth || element.offsetWidth;
console.log(width);
JS动态获取div的高度同理:
var element = document.getElementById("css_page_adapter");
var height= element.clientHeight || element.offsetHeight;
console.log(height);
更多推荐
已为社区贡献11条内容
所有评论(0)