目录

问题描述

Vue监听并动态获取页面的高度和宽度

 js动态获取页面的高度和宽度

问题描述

前端页面往往由于屏幕分辨率大小不一,导致样式错乱,使得在不同分辨率的电脑上,数据也因此变成乱成一堆.

正常情况下显示条件

 宽度不够导致异常显示情况下(按钮被挤到下一行了)

 因此,计算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);

# vue.js # javascript # html
Logo
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}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue