Vue中如何給Window對象添加方法
更新時(shí)間：2022年04月19日 14:33:18 作者：叮當(dāng)Ding
這篇文章主要介紹了Vue中如何給Window對象添加方法，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
給Window對象添加方法
大家都知道vue中所有元素都是作用于Vue實(shí)例的,可是我使用DCloud的Wap2App打包App之后需要配置sitemap.json,配置onclick事件,但是該事件只能綁定Window下的方法,所以此時(shí)就需要在Vue中定義一個(gè)方法,并將其綁定在Windows對象下
首先在 App.vue methods 中定義一個(gè)方法
methods:{
? ? share(){
? ? ? ? //微信分享
? ? ? ? ...
? ? }
}然后在 mounted 中寫下如下代碼,將其綁定在 Window 對象下
mounted(){
? ?// 將分享方法綁定在window上
? ?window['share'] = () => {
? ? ?this.share()
? ?}
},此時(shí) Window 對象下就有了一個(gè) share 方法可以被調(diào)用
為window對象添加事件處理程序
以resize事件為例，要獲取窗口變化時(shí)的窗口大?。涸赾reated鉤子函數(shù)中為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();
}
}
});
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在這篇博客中,我們將探討?script?setup?的含義、好處以及示例代碼,幫助你更好地理解并在項(xiàng)目中合理運(yùn)用這一特性,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03
權(quán)限是對特定資源的訪問許可，所謂權(quán)限控制，也就是確保用戶只能訪問到被分配的資源，這篇文章主要介紹了vue的權(quán)限管理的相關(guān)知識,需要的朋友可以參考下2022-06-06
這篇文章主要給大家介紹了關(guān)于vue3使用百度地圖的相關(guān)資料,最近一個(gè)項(xiàng)目要用到地圖，因?yàn)槲⑿判〕绦蛴玫囊彩前俣鹊貓D，所以想著網(wǎng)頁端也用百度地圖,需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡易計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
這篇文章主要介紹了vue中路由重定向redirect問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了VUE?axios每次請求添加時(shí)間戳問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了Vue的兼容性解決方案Babel-polyfill的相關(guān)知識,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11
這篇文章主要介紹了詳解vue不同環(huán)境配置不同的打包命令，主要包括正式環(huán)境、測試環(huán)境和開發(fā)環(huán)境，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04
vue3中element-plus?icon圖標(biāo)的正確使用姿勢
element-plus官方提示,Icon圖標(biāo)正在向SVG?Icon遷移,之前使用的Font?Icon即將被棄用,下面這篇文章主要給大家介紹了關(guān)于vue3中element-plus?icon圖標(biāo)的正確使用姿勢,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了解決vue中reader.onload讀取文件的異步問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10