这篇文章主要介绍了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(); } } });
以上为个人经验,希望能给大家一个参考,也希望大家多多支持北冥有鱼。
您可能感兴趣的文章:
- vue如何使用window.open打开页面并拼接参数
- vue项目中销毁window.addEventListener事件监听解析
- vue中window.addEventListener(‘scroll‘, xx)失效的解决
- 教你利用Vue3模仿Windows窗口
- vue中的dom节点和window对象
- vue如何把组件方法暴露到window对象中