Vue中如何给Window对象添加方法
作者：叮当Ding
这篇文章主要介绍了Vue中如何给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();
}
}
});
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。