快捷導(dǎo)航

vue全局混入之狀態(tài)判斷是否執(zhí)行點(diǎn)擊

更新時(shí)間：2024年03月07日 08:59:06 作者：Jackson_3791

這篇文章主要介紹了vue全局混入之狀態(tài)判斷是否執(zhí)行點(diǎn)擊方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue全局混入狀態(tài)判斷是否執(zhí)行點(diǎn)擊

1.項(xiàng)目下創(chuàng)建 mps-ui\src\plugins\listenerClick.js

2.文件內(nèi)寫法

//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根據(jù)條件決定是否執(zhí)行事件

再配合三目運(yùn)算 , 可以更完善

vue中的全局混入mixin

混入提供了一種非常靈活的方式，來分發(fā) Vue 組件中的可復(fù)用功能。

一個(gè)混入對(duì)象可以包含任意組件選項(xiàng)。

當(dāng)組件使用混入對(duì)象時(shí)，所有混入對(duì)象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)。

舉例

// 定義一個(gè)混入對(duì)象
var myMixin = {
  created() {
    this.hello()
  },
  methods: {
    hello() {
      console.log('hello from mixin!')
    }
  }
}
 
// main.js全局使用
Vue.mixin(myMixin)

因?yàn)槭侨只烊耄琺yMixin中的數(shù)據(jù)和方法會(huì)被掛載到每個(gè)組件的實(shí)例對(duì)象上

注意：

1、當(dāng)組件和混入對(duì)象含有同名選項(xiàng)時(shí)，這些選項(xiàng)將以恰當(dāng)?shù)姆绞竭M(jìn)行“合并”。

比如，數(shù)據(jù)對(duì)象在內(nèi)部會(huì)進(jìn)行遞歸合并，并在發(fā)生沖突時(shí)以組件數(shù)據(jù)優(yōu)先。

2、同名鉤子函數(shù)將合并為一個(gè)數(shù)組，因此都將被調(diào)用。另外，混入對(duì)象的鉤子將在組件自身鉤子之前調(diào)用。

3、值為對(duì)象的選項(xiàng)，例如 methods、components 和 directives，將被合并為同一個(gè)對(duì)象。兩個(gè)對(duì)象鍵名沖突時(shí)，取組件對(duì)象的鍵值對(duì)。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

解決ElementUI中tooltip出現(xiàn)無法顯示的問題
這篇文章主要介紹了解決ElementUI中tooltip出現(xiàn)無法顯示的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
element-ui 中如何修改loading加載樣式
element-ui 中的 loading 加載功能,默認(rèn)是全屏加載效果,設(shè)置局部,需要自定義樣式或者修改樣式,下面給大家分享實(shí)例代碼,感興趣的朋友跟隨小編一起看看吧
2024-05-05
Vue項(xiàng)目實(shí)現(xiàn)文件下載進(jìn)度條功能
大文件下載,花費(fèi)的時(shí)間比較長(zhǎng),沒有任何提示,用戶體驗(yàn)很差,需要優(yōu)化,提示文件在下載中,并且顯示進(jìn)度百分比,下面小編給大家?guī)砹薞ue項(xiàng)目實(shí)現(xiàn)文件下載進(jìn)度條功能,感興趣的朋友一起看看吧
2024-03-03
Vue中slot的使用詳解
這篇文章主要介紹了Vue中slot的使用詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05
VUE+Java實(shí)現(xiàn)評(píng)論回復(fù)功能
這篇文章主要為大家詳細(xì)介紹了VUE+Java實(shí)現(xiàn)評(píng)論回復(fù)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
Vue3中watch監(jiān)聽使用詳解
watch 函數(shù)用來偵聽特定的數(shù)據(jù)源,并在回調(diào)函數(shù)中執(zhí)行副作用,下面這篇文章主要給大家介紹了關(guān)于Vue3中watch監(jiān)聽使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-08-08
vue2.0路由切換后頁面滾動(dòng)位置不變BUG的解決方法
下面小編就為大家分享一篇vue2.0路由切換后頁面滾動(dòng)位置不變BUG的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
vue中動(dòng)態(tài)渲染數(shù)據(jù)時(shí)使用$refs無效的解決
這篇文章主要介紹了vue中動(dòng)態(tài)渲染數(shù)據(jù)時(shí)使用$refs無效的解決方案，具有很好的參考價(jià)值。希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
在?Vue?項(xiàng)目中如何引用?assets?文件夾中的圖片(方式匯總)
Vue中引用assets文件夾中的圖片有多種方式,在.vue文件的模板部分,使用相對(duì)路徑或通過@別名引用圖片,在CSS中,通過相對(duì)路徑或@別名引用圖片作為背景,在JavaScript中,通過import語句導(dǎo)入圖片資源,并使用v-bind在模板中綁定顯示,這些方法均可有效管理和引用項(xiàng)目中的圖片資源
2024-09-09
vue-cli3.x配置全局的scss的時(shí)候報(bào)錯(cuò)問題及解決
這篇文章主要介紹了vue-cli3.x配置全局的scss的時(shí)候報(bào)錯(cuò)問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04