vue2.0 动态适应浏览器窗口

1.data中给需要动态设置的数据一个初始值

// html
<div :style="styleObject">我是demo</div>
// js
   data() {
            return {
                styleObject: {
                    height: '900px'
                }
            }
        }

2.在mounted钩子中设置并监测浏览器窗口变化

  mounted() {
            // 动态设置背景图的高度为浏览器可视区域高度
            // 首先在Virtual DOM渲染数据时,设置下demo的高度.
            this.styleObject.height = `${document.documentElement.clientWidth*0.4}px`; // 具体计算看需要
            // 然后监听window的resize事件.在浏览器窗口变化时再设置下背景图高度.
            const that = this;
            window.onresize = function temp() {
                that.styleObject.height = `${document.documentElement.clientWidth*0.4}px`;
            };
        },

没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试

关闭