Vue中如何給Window對象添加方法
更新時間：2022年04月19日 14:33:18 作者：叮當(dāng)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 方法可以被調(diào)用
為window對象添加事件處理程序
以resize事件為例，要獲取窗口變化時的窗口大?。涸赾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();
}
}
});
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue使用Font Awesome的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要給大家介紹了關(guān)于Vue前端高效開發(fā)之列表渲染指令的相關(guān)資料,vue.js 使用的是 v-for 指令來處理組件元素的循環(huán)迭代邏輯,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-06-06
這篇文章主要介紹了Vue文件下載進度條的實現(xiàn)原理,通過使用onDownloadProgress方法API獲取進度及文件大小等數(shù)據(jù)，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
Element-ui/Element-plus?Vue報錯問題及解決
這篇文章主要介紹了Element-ui/Element-plus?Vue報錯問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
Vuex結(jié)合storage實現(xiàn)用戶信息本地存儲方式
這篇文章主要介紹了Vuex結(jié)合storage實現(xiàn)用戶信息本地存儲方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue如何實現(xiàn)簡易流程圖問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue2.0+elementui實現(xiàn)一個上門取件時間組件
這篇文章主要給大家介紹了關(guān)于vue2.0+elementui實現(xiàn)一個上門取件時間組件的相關(guān)資料,用于預(yù)約上門服務(wù)時間 看到網(wǎng)上有很多亂七八糟的代碼,看著頭疼,于是自己寫了一個簡單的,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了解析vue路由異步組件和懶加載案例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
vue中el-date-picker選擇日期的限制的項目實踐
ElementUI的el-date-picker使用時,有時候想要限制用戶選擇的時間范圍,本文就來介紹了vue中el-date-picker選擇日期的限制的項目實踐,感興趣的可以了解一下2023-10-10
Vue.config.productionTip?=?false?不起作用的問題及解決
這篇文章主要介紹了Vue.config.productionTip?=?false為什么不起作用,本文給大家分析問題原因解析及解決方案，需要的朋友可以參考下2022-11-11