Vue中如何给Window对象添加方法

目录

• 给Window对象添加方法
• 为window对象添加事件处理程序

给Window对象添加方法

大家都知道vue中所有元素都是作用于Vue实例的,可是我使用DCloud的Wap2App打包App之后需要配置sitemap.json,配置onclick事件,但是该事件只能绑定Window下的方法,所以此时就需要在Vue中定义一个方法,并将其绑定在Windows对象下

首先在 App.vue methods 中定义一个方法

methods:{
    share(){
        //微信分享
        ...
    }
}

然后在 mounted 中写下如下代码,将其绑定在 Window 对象下

mounted(){
   // 将分享方法绑定在window上
   window['share'] = () => {
     this.share()
   }
},

此时 Window 对象下就有了一个 share 方法可以被调用

为window对象添加事件处理程序

以resize事件为例，要获取窗口变化时的窗口大小：在created钩子函数中为window对象添加事件处理程序

        var app = new Vue({
            el: '#app',
            data: {
                winWidth: {
                    type: Number
                },
                winHeight: {
                    type: Number
                }
            },
            methods: {
                viewWidth() {
                    return window.innerWidth || document.documentElement.clientWidth;
                },
                viewHeight() {
                    return window.innerHeight || document.documentElement.clientHeight;
                },
                updateWindow() {
                    this.winWidth = this.viewWidth();
                    this.winHeight = this.viewHeight();
                }
            },
            created() {
                this.updateWindow();
                window.onresize = () => {
                    this.updateWindow();
                }
            }
        });

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。