vue全局混入之狀態(tài)判斷是否執(zhí)行點擊
更新時間：2024年03月07日 08:59:06 作者：Jackson_3791
這篇文章主要介紹了vue全局混入之狀態(tài)判斷是否執(zhí)行點擊方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue全局混入狀態(tài)判斷是否執(zhí)行點擊
1.項目下創(chuàng)建 mps-ui\src\plugins\listenerClick.js
2.文件內寫法
//listenerClick.js
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters(['leftNavStatus'])
},
data() {
return {}
},
mounted() {
if (document.getElementById('controlBtn11')) {
document
.getElementById('controlBtn11')
.addEventListener('click', this.doSomeThings(), true)
}
},
methods: {
doSomeThings() {}
}
}
3.main.js
加以下代碼
// 全局監(jiān)聽
Vue.mixin(require('./directive/listenerClick.js').default)
全局可使用這里面的變量和方法
vue根據條件決定是否執(zhí)行事件
再配合三目運算 , 可以更完善
vue中的全局混入mixin
混入提供了一種非常靈活的方式，來分發(fā) Vue 組件中的可復用功能。
一個混入對象可以包含任意組件選項。
當組件使用混入對象時，所有混入對象的選項將被“混合”進入該組件本身的選項。
舉例
// 定義一個混入對象
var myMixin = {
created() {
this.hello()
},
methods: {
hello() {
console.log('hello from mixin!')
}
}
}
// main.js全局使用
Vue.mixin(myMixin)因為是全局混入，myMixin中的數據和方法會被掛載到每個組件的實例對象上
注意：
1、當組件和混入對象含有同名選項時，這些選項將以恰當的方式進行“合并”。
比如，數據對象在內部會進行遞歸合并，并在發(fā)生沖突時以組件數據優(yōu)先。
2、同名鉤子函數將合并為一個數組，因此都將被調用。另外，混入對象的鉤子將在組件自身鉤子之前調用。
3、值為對象的選項，例如 methods、components 和 directives，將被合并為同一個對象。兩個對象鍵名沖突時，取組件對象的鍵值對。
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了解決ElementUI中tooltip出現無法顯示的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
element-ui 中的 loading 加載功能,默認是全屏加載效果,設置局部,需要自定義樣式或者修改樣式,下面給大家分享實例代碼,感興趣的朋友跟隨小編一起看看吧2024-05-05
大文件下載,花費的時間比較長,沒有任何提示,用戶體驗很差,需要優(yōu)化,提示文件在下載中,并且顯示進度百分比,下面小編給大家?guī)砹薞ue項目實現文件下載進度條功能,感興趣的朋友一起看看吧2024-03-03
這篇文章主要介紹了Vue中slot的使用詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要為大家詳細介紹了VUE+Java實現評論回復功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
watch 函數用來偵聽特定的數據源,并在回調函數中執(zhí)行副作用,下面這篇文章主要給大家介紹了關于Vue3中watch監(jiān)聽使用的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
下面小編就為大家分享一篇vue2.0路由切換后頁面滾動位置不變BUG的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue中動態(tài)渲染數據時使用$refs無效的解決方案，具有很好的參考價值。希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
在?Vue?項目中如何引用?assets?文件夾中的圖片(方式匯總)
Vue中引用assets文件夾中的圖片有多種方式,在.vue文件的模板部分,使用相對路徑或通過@別名引用圖片,在CSS中,通過相對路徑或@別名引用圖片作為背景,在JavaScript中,通過import語句導入圖片資源,并使用v-bind在模板中綁定顯示,這些方法均可有效管理和引用項目中的圖片資源2024-09-09
這篇文章主要介紹了vue-cli3.x配置全局的scss的時候報錯問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04