阿西八!!!寫久了Flutter,前端的知識真的是忘得差不多了,今天就來複習一下Vue中如何封裝公用變量
以及公用方法
以封裝一個正則表達式爲例!
第一步
創建我們的公用文件夾
我們來看一下utils.js中的代碼
class PublicMethods{
constructor() {
this.name = '公用變量'
}
verificationPhon(phone){
// 大陸手機號碼11位數,匹配格式:前三位固定格式+後8位任意數
// 13+任意數 * 15+除4的任意數 * 18+除1和4的任意數 * 17+除9的任意數 * 147
// 新增了166、198、199號段的手機號
var reg= /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
return reg.test(phone);
}
}
var Plugins = new PublicMethods();
export default Plugins;
知識講解:
export 和 export default的區別是什麼?
通過export拋出去的變量或者方法,使用的時候需要用{ }包裹住,來指明使用什麼,而export default就方便些,拋出去後,直接用即可,可以自己試一下!
很好,我們現在已經將公用的方法以及變量拋出去了,那如何使用他呢?
首先打開我們Vue的命根子:main.js
import Vue from 'vue'
import App from './App'
import Plugins from '@/utils/utils.js'
Vue.config.productionTip = false
Vue.prototype.Plugins = Plugins;
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
注意代碼中的Plugins,就是我們掛載到了Vue的實例上面了,也就是可以全局使用這個封裝的JS,接下來我們就去需要使用的頁面使用它
點擊圖中的驗證碼按鈕,就可以調用我們的這個方法了,記得傳入手機號
getCode(){
console.log(this.Plugins.verificationPhon(this.phone));
}