欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

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

时间:2022-08-06 11:13:58|栏目:vue|点击:

给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();
                }
            }
        });

上一篇:vue实现验证码倒计时按钮

栏    目:vue

下一篇:vue实现评论列表

本文标题:Vue中如何给Window对象添加方法

本文地址:http://www.codeinn.net/misctech/210039.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有