Vue 监听 window.resize

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>Vue中绑定全局事件onresize</title>
    <meta name="viewport" content="width=device-width"/>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body>
    <table id="app">
        <tr><td>document.body.clientXXX</td>        <td>屏幕可见区域</td> <td>{{ clientSize }}</td></tr>
        <tr><td>document.body.offsetXXX</td>        <td>屏幕可见区域</td> <td>{{ offsetSize }}</td></tr>
        <tr><td>document.body.scrollXXX</td>        <td>网页正文全文</td> <td>{{ scrollSize }}</td></tr>
        <tr><td>window.innerXXX</td>            <td>内边界（视口）</td>    <td>{{ innerSize }}</td></tr>
        <tr><td>window.outerXXX</td>            <td>外边框</td>        <td>{{ outerSize }}</td></tr>
        <tr><td>window.screen.availXXX</td>     <td>屏幕可用工作区</td>    <td>{{ availSize }}</td></tr>
        <tr><td>window.screen.clientXXX</td>        <td>屏幕物理分辨率</td>    <td>{{ screenSize }}</td></td></tr>
        <tr><td>window.screen.devicePixelRatio</td> <td>屏幕缩放因子</td> <td>{{ devicePixelRatio }}</td></tr>
        <tr><td>window.screen.deviceXDPI</td>       <td>DPI</td>        <td>{{ deviceXDPI }}</td></tr>
    </table>
    <script>
        function getDPI() {
            var arrDPI = new Array;
            var tip;
            if (window.screen.deviceXDPI) {
                tip = "support window.screen.deviceXDPI";
                arrDPI[0] = window.screen.deviceXDPI;
                arrDPI[1] = window.screen.deviceYDPI;
            }
            else {
                tip = "not support window.screen.deviceXDPI";
                var tmpNode = document.createElement("DIV");
                tmpNode.style.cssText = "width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden";
                document.body.appendChild(tmpNode);
                arrDPI[0] = parseInt(tmpNode.offsetWidth);
                arrDPI[1] = parseInt(tmpNode.offsetHeight);
                tmpNode.parentNode.removeChild(tmpNode);    
            }
            return arrDPI + ' (' + tip + ')';
        }
        new Vue({
            el: '#app',
            data: {
                clientSize: document.body.clientWidth + ' * ' + document.body.clientHeight,
                offsetSize: document.body.offsetWidth + ' * ' + document.body.offsetWidth,
                scrollSize: document.body.scrollWidth + ' * ' + document.body.scrollHeight,
                that.innerSize = window.innerWidth + ' * ' + window.innerHeight;
                that.outerSize = window.outerWidth + ' * ' + window.outerHeight;
                availSize: window.screen.availWidth + ' * ' + window.screen.availHeight,
                screenSize: window.screen.width + ' * ' + window.screen.height,
                devicePixelRatio: window.devicePixelRatio + 'X',
                deviceXDPI: getDPI(),
            },
            created() {
                const that = this;
                window.onresize = ()=> {
                    that.clientSize = document.body.clientWidth + ' * ' + document.body.clientHeight;
                    offsetSize = document.body.offsetWidth + ' * ' + document.body.offsetWidth;
                    scrollSize = document.body.scrollWidth + ' * ' + document.body.scrollHeight;
                    that.innerSize = window.innerWidth + ' * ' + window.innerHeight;
                    that.outerSize = window.outerWidth + ' * ' + window.outerHeight;
                    that.availSize = window.screen.availWidth + ' * ' + window.screen.availHeight;
                    that.screenSize = window.screen.width + ' * ' + window.screen.height;
                    that.devicePixelRatio = window.devicePixelRatio + 'X';
                    that.deviceXDPI = getDPI();
                }
            }
        })
    </script>
</body>
</html>

Vue 中的 created，也可以用 mounted 来代替。
它们的共同点是仅在Vue初始化时执行一次。
created：在实例创建完成后执行的钩子
mounted：编译好的HTML挂载到页面完成后执行的事件钩子

另外，Vue中可以直接调用JS的方法。但如果要调用 Vue中的 methods 中定义的方法就会绕一点，需要使用 this.$options.methods.MethodName();

Vue 监听 window.resize

猜你喜欢