欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于vue框架手寫一個notify插件實現(xiàn)通知功能的方法

 更新時間:2019年03月31日 11:40:40   作者:唐吉sir  
這篇文章主要介紹了基于vue框架手寫一個notify插件實現(xiàn)通知功能的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

簡單編寫一個vue插件,當點擊時觸發(fā)notify插件,dom中出現(xiàn)相應內(nèi)容并且在相應時間之后清除,我們可以在根組件中設定通知內(nèi)容和延遲消失時間。

1. 基礎知識

我們首先初始化一個vue項目,刪除不需要的組件和樣式,主要針對src下一些初始化資源,有過vue項目基礎的應該很容易理解,如果沒有vue基礎建議先熟悉每個初始化文件的作用。

關于vue中如何開發(fā)插件可以直接看vue官方文檔,簡單了解插件開發(fā)過程,vue插件文檔

現(xiàn)在我們在src目錄下新建一個plugin文件夾,里面存放要開發(fā)的插件notify.js

// notify.js
let notify = {  //需要在此對象擁有一個install 方法

};
notify.install = function () {
  alert('tangj')
}
// 導出這個對象,如果使用Vue.use()就會自動調(diào)用install方法
export default notify;

然后在main函數(shù)導入這個模塊并使用

import notify from './plugin/notify.js'
Vue.use(notify)

運行這個vue項目可以看到,頁面開始加載有一個彈出框,說明我們創(chuàng)建的插件調(diào)用成功

2. notify.js主要功能

上面我們知道了,Vue.use()會自動調(diào)用install方法,install第一個參數(shù)為Vue構造函數(shù),第二個參數(shù)即為輸入的內(nèi)容,默認undefined,所以我們在調(diào)用一開始的時候為Vue這個構造函數(shù)的原型上添加一個$notify方法,此后,每一個Vue的實例都能調(diào)用這個方法,這樣我們就可以通過給根組件綁定一個點擊事件,讓$notify執(zhí)行。

當然這樣還是不夠的,回到開頭說的,根組件可以設定通知內(nèi)容和通知延遲時間,相當于給this.$notify傳遞兩個參數(shù),第一個是通知內(nèi)容,第二個是延遲時間。

因此,原型上的notify函數(shù)還得接受兩個參數(shù),當有通知內(nèi)容把通知內(nèi)容替代,有延遲時間把延遲時間替代,為了插件的完整性,記得要給參數(shù)設定默認值。

總結一下業(yè)務邏輯:點擊頁面需要出現(xiàn)一個通知內(nèi)容,經(jīng)過延遲時間后消失,所以我們可以導入一個模塊,并把這個模塊掛載到頁面上,經(jīng)過相應的延遲時間后移除

import modal from './notify.vue'
let notify = {  //需要在此對象擁有一個install 方法

};
notify.install = function (Vue,options={delay:3000}) {    
  Vue.prototype.$notify = function (message,opt={}) {
    options = {...options,...opt}; //用自己調(diào)用插件時傳遞過來的屬性覆蓋默認設置的值
    let v = Vue.extend(modal); //返回的是一個構造函數(shù)的子類,參數(shù)是包含組件選項的對象
    let vm = new v;
    let oDiv = document.createElement('div'); //創(chuàng)建一個div將實例掛載到元素上
    vm.$mount(oDiv);
    vm.value = message;
    document.body.appendChild(vm.$el);
    setTimeout(()=>{ //根據(jù)delay將dom元素移除
      document.body.removeChild(vm.$el);
    },options.delay) 
  }
}
// 導出這個對象,如果使用Vue.use()就會自動調(diào)用install方法
export default notify;

3. 完善notify.js

現(xiàn)在還有一個問題,我們不斷點擊的時候,會通知很多個組件,這顯然不符合預期


解決的辦法很簡單,我們只要在執(zhí)行之前判斷是否已經(jīng)存在了這個實例,如果存在直接返回不再繼續(xù),如果不存在,那么執(zhí)行往后的邏輯

notify.install = function (Vue,options={delay:3000}) {    
  Vue.prototype.$notify = function (message,opt={}) {
    if(notify.el)return;//判斷dom上是否存在這個實例
    options = {...options,...opt}; 
    let v = Vue.extend(modal); 
    let vm = new v;
    let oDiv = document.createElement('div'); 
    vm.$mount(oDiv);
    vm.value = message;
    document.body.appendChild(vm.$el);
    notify.el = vm.$el;   //把實例給notify對象    
    setTimeout(()=>{ 
      document.body.removeChild(vm.$el);
      notify.el = null; // 清空這個對象
    },options.delay) 
  }
}

最后

這是很簡單的一個vue插件寫法,我們可以用這種思維創(chuàng)造很多有用的插件,比如vue-router、vue-awesome-swiper等等,很大程度上提高了開發(fā)效率

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • vue常見的通信方式總結

    vue常見的通信方式總結

    我們?nèi)粘m椖块_發(fā)中,少不了組件之間的通信,我們可能只知道一些常見的方式比如props,emits,其實,實現(xiàn)組件間的通信有很多種方式,本文就給大家總結一些我們常見的通信方式,需要的朋友可以參考下
    2023-08-08
  • Vue?Router修改query參數(shù)url參數(shù)沒有變化問題及解決

    Vue?Router修改query參數(shù)url參數(shù)沒有變化問題及解決

    這篇文章主要介紹了Vue?Router修改query參數(shù)url參數(shù)沒有變化問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • 使用webpack搭建vue項目及注意事項

    使用webpack搭建vue項目及注意事項

    這篇文章主要介紹了使用webpack搭建vue項目的方法,本文以開發(fā)環(huán)境為例,通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-06-06
  • vue3中標簽form插件的使用教程詳解

    vue3中標簽form插件的使用教程詳解

    這篇文章主要為大家詳細介紹了vue3中標簽form插件的使用的相關知識,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以了解下
    2024-01-01
  • vue實現(xiàn)列表無縫滾動效果

    vue實現(xiàn)列表無縫滾動效果

    這篇文章主要為大家詳細介紹了vue實現(xiàn)列表無縫滾動效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • vue2.0頁面前進刷新回退不刷新的實現(xiàn)方法

    vue2.0頁面前進刷新回退不刷新的實現(xiàn)方法

    這篇文章主要介紹了vue2.0頁面前進刷新回退不刷新的實現(xiàn)方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-07-07
  • vue 表單輸入格式化中文輸入法異常問題

    vue 表單輸入格式化中文輸入法異常問題

    v-model 是 vue.js 提供的語法糖,根據(jù)不同的表單控件監(jiān)聽不同的事件,實現(xiàn)對表單控件的數(shù)據(jù)雙向綁定。這篇文章主要介紹了vue 表單輸入格式化中文輸入法異常,需要的朋友可以參考下
    2018-05-05
  • 淺談vue后臺管理系統(tǒng)權限控制思考與實踐

    淺談vue后臺管理系統(tǒng)權限控制思考與實踐

    這篇文章主要介紹了淺談vue后臺管理系統(tǒng)權限控制思考與實踐,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-12-12
  • 解決vue項目報錯webpackJsonp is not defined問題

    解決vue項目報錯webpackJsonp is not defined問題

    下面小編就為大家分享一篇解決vue項目報錯webpackJsonp is not defined問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • 深入理解基于vue-cli的vuex配置

    深入理解基于vue-cli的vuex配置

    本篇文章主要介紹了基于vue-cli的vuex配置,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-07-07

最新評論