Vue 如何檢測瀏覽器視窗的變化

2021-09-18 01:32:54 字數 708 閱讀 5565

起源:**右側做了快速導航的功能,但是滑倒底部 導航會覆蓋footer,很醜,所以決定利用瀏覽器視窗發生改變來控制導航的高度。參考**(

實現過程:

1、我們將document.body.clientwidth賦值給data中自定義的變數:

data:

2、在頁面mounted時,掛載window.onresize方法:

mounted () )()}}

3、監聽screenwidth屬性值的變化,列印並觀察screenwidth發生變化的值:

watch: , 400)

this.$nexttick(() => {

this.scrollhide();

mounted() {

this.scrollhide()

methods: {

scrollhide(){

var asideheight = $(".bloganchor").height();

if(asideheight > this.screenwidth-275){

$(".bloganchor").height( this.screenwidth-275+'px').css("overflow-y","auto");

4、這樣就可以檢測到了

瀏覽器視窗關閉

一般的視窗關閉的js如下寫法 window.close 但是呢,chrome,firefox等中有時候會不起作用。改為下面的寫法 window.open about blank self close 或者window.open self close 如果是frame的時候如下寫法 一般 window...

瀏覽器視窗的大小

var w window.innerwidth document.documentelement.clientwidth document.body.clientwidth var h window.innerheight document.documentelement.clientheight ...

絕對定位中瀏覽器視窗變化導致的位移差異

今天發現使用position屬性的絕對定位時,如果使用了margin auto的居中背景便會出現定位元素隨著瀏覽器視窗的大小不同而出現與背景的差異。position absolute這裡先埋個坑,改天再來填。值描述 absolute 生成絕對定位的元素,相對於 static 定位以外的第乙個父元素進...