vue 開發外掛程式流程

ui demo

ui 外掛程式彙總

我的github isam2016

在練習寫ui元件的，用到全域性的外掛程式，網上看了些資料。看到些的挺好的，我也順便總結一下寫外掛程式的流程；

宣告外掛程式-> 寫外掛程式-> 註冊外掛程式 —> 使用外掛程式

vue.js 的外掛程式應當有乙個公開方法 install 。

第乙個引數是 vue 構造器 ,

第二個引數是乙個可選的選項物件:而options設定選項就是指，在呼叫這個外掛程式時，可以傳乙個物件供內部使用

// myplugin.js

export default 
};

import myplugin from './myplugin.js'

vue.use(myplugin)

// 1. 新增全域性方法或屬性

vue.myglobalmethod = function () 
// 2. 新增全域性資源
vue.directive('my-directive', 
...})
// 3. 注入元件
vue.mixin(
...})
// 4. 新增例項方法
vue.prototype.$mymethod = function (options)

// code

vue.test = function () 
// 呼叫
vue.test()
**通過3.1新增，是在元件裡，通過this.test()來呼叫**
**通過3.2新增，是在外面，通過vue例項，如vue.test()來呼叫**

vue.filter('formattime', function (value) ;

if (/(y+)/.test(fmt))
fmt = fmt.replace(regexp.$1, (this.getfullyear() + "").substr(4 - regexp.$1.length));
for (var k in o)
if (new regexp("(" + k + ")").test(fmt))
fmt = fmt.replace(regexp.$1, (regexp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}return new date(value).format("yyyy-mm-dd hh:mm:ss");
})// 呼叫
}

vue.mixin(

})可以和【例項屬性】配合使用，用於除錯或者控制某些功能
/ 注入元件
vue.mixin(
})// 新增注入元件時，是否利用console.log來通知的判斷條件
vue.prototype.notice = false;

元件裡若本身有test方法，並不會 先執行外掛程式的test方法，再執行元件的test方法。而是只執行其中乙個，並且優先執行元件本身的同名方法。這點需要注意

不需要手動呼叫，在執行對應的方法時會被自動呼叫的

新增例項方法或屬性

//讓輸出的數字翻倍，如果不是數字或者不能隱式轉換為數字，則輸出null

vue.prototype.doublenumber = function (val) else if (!isnan(number(val))) else 
}//在元件中呼叫
this.doublenumber(this.num);

vue外掛程式開發

vue外掛程式開發主要是用來實現一些全域性方法或者全域性物件。vue的外掛程式要求是實現乙個install公開方法。其中此install方法的第乙個入參是vue構造器，第二個入參是 是乙個可選的選項物件。一 開發 以乙個alert的彈窗外掛程式為示例，alert.js 具體 如下 定義乙個全域性變數...

Vue 外掛程式開發

vue.js 的外掛程式應當有乙個公開方法 install 這個方法的第乙個引數是 vue 構造器 第二個引數是乙個可選的選項物件 myplugin.install function vue,options vue.directive my directive vue.mixin vue.proto...

vue開發外掛程式

1 新建plugin.js,檔案內容如下 import name1 from name1.vue let myplugin myplugin.install function vue,options 2.新增全域性資源 vue.directive my directive 3.注入元件選項 vue....