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