vue监听页面宽度高度

监听窗口变化：windowonresize

JS的一些方法：

网页可见区域宽：documentbodyclientWidth

网页可见区域高：documentbodyclientHeight

网页可见区域宽：documentbodyoffsetWidth (包括边线的宽)

网页可见区域高：documentbodyoffsetHeight (包括边线的宽)

data () {

return {

screenWidth: documentbodyclientWidth

}

},

mounted () {

const that = this

windowonresize = () => {

return (() => {

windowscreenWidth = documentbodyclientWidth

thatscreenWidth = windowscreenWidth

})()

}

}，

watch:{

screenWidth(val){

// 为了避免频繁触发resize函数导致页面卡顿，使用定时器

if(!thistimer){

// 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth

thisscreenWidth = val

thistimer = true

let that = this

setTimeout(function(){

// 打印screenWidth变化的值

consolelog(thatscreenWidth)

thattimer = false

},400)

}

}

}

最近做了一个项目，需要表格的高度跟着浏览器的高度变化，页面不会出现滚动条，并且分页器一直在浏览器的底部

表头的搜索框的高度可以伸缩，不是固定的，这就需要监听到搜索框的高度，用浏览器的高度减去搜索框的高度和分页器的高度就是表格的高度了

先自定义监听方法吧，如下：

现在组件内注册

directives方法跟data，methods方法是平级的

需要监听的组件绑定这个方法，这里是监听表头的高度

这时就已经监听到的表头的宽高变化了，就可以拿出来用了

点击向下的箭头上面有几页的那部分显示，点击其他地方那部分隐藏，本来是没有头绪的，后来看到一个暴躁老哥的博客上有 >

DIV部分

<chart

  ref="taskChart"

  :theme="chartstheme"

  autoresize :options="chartsoptionsu"

  @click="zydwclick"

  :style="{width:chartswidth,height:chartsheight}">

</chart>

<iframe width="100%" ref="mapIframe" class="rectCorner" id="zykhMapIframe" scrolling="no"

        :src="YZKH_URL" :height="ifram_height"

        frameborder="0">

</iframe>

data部分

charts:{

//div的高度

ifram_height:0,

//echarts的高度宽度

width:'100%',

height:"230px",}

//自动设置chart的高度

methods: {

RowResize() {

let me =this;

  const deviceHeight = documentdocumentElementclientHeight

  const chartHeight = (Number(deviceHeight) 082) /2//两个row

//计算echarts 的高度

  mechartsheight = chartHeight +'px';

//计算div部分的高度

  meifram_height = (Number(deviceHeight) 078) +'px'

},

在mountd里面调用

mounted() {

let me =this;

meRowResize();

//监视窗口发生变化再调用一次

windowonresize =function () {

meRowResize();

}

获取DOM的高度宽度公式

DOM可视高度/DOM最长的高度=计算比例

计算  table高度 

<Table border

      @on-sort-change="onSortChange"

      :columns="tableAtableColumns"

      :data="tableAtableData"

      :height="height"

      ref="currentRowTable"

      :percent="percent"

      style="white-space: nowrap;word-break: keep-all"

></Table>

data() {

return {

height:100,

//自动设置列表的高度

RowResize() {

let me =this;

  const deviceHeight = documentdocumentElementclientHeight

  if (me$refscurrentRowTable) {

meheight = Number(deviceHeight) 065

  }

},

let me =this

meRowResize();

//监听窗口大小变化

windowonresize =function () {

meRowResize();

}

data () {

    return {

        docmHeight: '0',  //默认屏幕高度

        showHeight:  '0',  //实时屏幕高度

        hidshow:true  //显示或者隐藏footer,

       isResize:false //默认屏幕高度是否已获取

    };

  },

mounted() {

    // windowonresize监听页面高度的变化

    windowonresize = ()=>{

        return(()=>{

                     if (!thisisResize) {

                               //默认屏幕高度

                               thisdocmHeight: documentdocumentElementclientHeight 

                               thisisResize = true

                       }

                        //实时屏幕高度

                       thisshowHeight = documentbodyclientHeight 

        })()

    }

  },

showHeight:function() {

        if(thisdocmHeight > thisshowHeight){

            thishidshow=false

        }else{

            thishidshow=true

        }

    }

<div class="footer" v-show="hidshow">

移动端点击输入框，d出键盘，底部被顶起问题

</div>

这个方法需要在表格外层设置一个div，原理是将表格的高度设置成外层div的高度，所以外层的div需要使用calc来设置高度，然后给表格设置:height="tableH"的属性

最外层div高度的设置方法

动态获取表格高度tableH的方法

还是需要在表格外加一层div,div高度设置和方法一相同，不过表格高度不用动态设置，直接设置height="100%"即可

这种方法不需要设置外层div,定义一个文件夹tableHeight分别定义一个tableHeightjs和indexjs

tableHeightjs如下

indexjs如下

使用方式，在mainjs里面引入以便全局使用，当然你也可以局部引入

mainjs

在表格中使用

在进行聊天界面开发的时候，发现安卓手机键盘会把界面顶起，但是不会收回来，在网上找到了这个方法解决

之前我是在mounted中根据documentactiveElementtagName的值判断是否为INPUT去改变键盘d起的高度

但是在下方加了一个按钮之后，发现点击语音按钮后再切换到输入框，

documentactiveElementtagName的值变成BODY了，查找资料发现

所以此方法在点击语音后再也调用不起来，困扰了一天的问题，记录一下

以上就是关于vue监听页面宽度高度全部的内容，包括:vue监听页面宽度高度、vue使用自定义指令监听Dom元素宽高变化、vue 点击 除某元素以外的区域关闭d窗等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！