Vue中如何給Window對(duì)象添加方法

更新時(shí)間：2022年04月19日 14:33:18 作者：叮當(dāng)Ding

這篇文章主要介紹了Vue中如何給Window對(duì)象添加方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

給Window對(duì)象添加方法

大家都知道vue中所有元素都是作用于Vue實(shí)例的,可是我使用DCloud的Wap2App打包App之后需要配置sitemap.json,配置onclick事件,但是該事件只能綁定Window下的方法,所以此時(shí)就需要在Vue中定義一個(gè)方法,并將其綁定在Windows對(duì)象下

首先在 App.vue methods 中定義一個(gè)方法

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

然后在 mounted 中寫下如下代碼,將其綁定在 Window 對(duì)象下

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

此時(shí) Window 對(duì)象下就有了一個(gè) share 方法可以被調(diào)用

為window對(duì)象添加事件處理程序

以resize事件為例，要獲取窗口變化時(shí)的窗口大?。涸赾reated鉤子函數(shù)中為window對(duì)象添加事件處理程序

        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)文章

Vue3中的script?setup語法糖的使用及說明
在這篇博客中,我們將探討?script?setup?的含義、好處以及示例代碼,幫助你更好地理解并在項(xiàng)目中合理運(yùn)用這一特性,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2025-03-03
深入解析vue中的權(quán)限管理
權(quán)限是對(duì)特定資源的訪問許可，所謂權(quán)限控制，也就是確保用戶只能訪問到被分配的資源，這篇文章主要介紹了vue的權(quán)限管理的相關(guān)知識(shí),需要的朋友可以參考下
2022-06-06
vue3使用百度地圖超詳細(xì)圖文教程
這篇文章主要給大家介紹了關(guān)于vue3使用百度地圖的相關(guān)資料,最近一個(gè)項(xiàng)目要用到地圖，因?yàn)槲⑿判〕绦蛴玫囊彩前俣鹊貓D，所以想著網(wǎng)頁端也用百度地圖,需要的朋友可以參考下
2023-07-07
vue實(shí)現(xiàn)簡易計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡易計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-01-01
vue中路由重定向redirect問題
這篇文章主要介紹了vue中路由重定向redirect問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
VUE?axios每次請(qǐng)求添加時(shí)間戳問題
這篇文章主要介紹了VUE?axios每次請(qǐng)求添加時(shí)間戳問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
Vue的兼容性解決方案Babel-polyfill案例解析
這篇文章主要介紹了Vue的兼容性解決方案Babel-polyfill的相關(guān)知識(shí),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2023-11-11
詳解vue 不同環(huán)境配置不同的打包命令
這篇文章主要介紹了詳解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讀取文件的異步問題
這篇文章主要介紹了解決vue中reader.onload讀取文件的異步問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10