vue定義global.js,掛載在vue原型上面使用

　　首先在src目錄下創建global目錄，在global目錄下創建index.js。

export default {
  install(Vue) {
    var that = this
    // 1. 添加全局方法或屬性
    // ue.global = this
    // 2. 添加全局資源
    // 3. 注入組件
    Vue.mixin({
      created() {
        this.global = that
      }
    })
    // 大於一的整數驗證，this.$jfjl，所有驗證方法無判空功能，如若判空，請用required: true
    Vue.prototype.$zsReg = (rule, value, callback) => {
      let reg = /^(([1-9]\d+)|[1-9])?$/; //大於一的整數
      if (reg.test(value) || !value) {
        callback();
      } else {
        return callback(new Error("請輸入大於1的整數"));
      }
    }
    // 金額的校驗
    Vue.prototype.$jeReg = (rule, value, callback) => {
      if (value > 200 || value < 1) {
        callback(new Error("請輸入小於200並且大於1的數字"));
      } else {
        let reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/; //1-200的數字，小數點后保留兩位
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("請輸入正確的金額"));
        }
      }
    }
    Vue.prototype.$jeRegMax = (rule, value, callback) => {
      let reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/; //小數點后保留兩位
      if (reg.test(value) || !value) {
        callback();
      } else {
        return callback(new Error("請輸入正確的金額"));
      }
    }
    // 手機號的驗證
    Vue.prototype.$sjhReg = (rule, value, callback) => {
      let reg = /^1[345789]\d{9}$/; //手機號碼正則
      if (reg.test(value)) {
        callback();
      } else {
        return callback(new Error("請輸入正確的手機號"));
      }
    }
    // 密碼校驗
    Vue.prototype.$parsswordReg = (rule, value, callback) => {
      let reg = /^(?![0-9]*$)[a-zA-Z0-9]{6,20}$/; //密碼校驗
      if (reg.test(value)) {
        callback();
      } else {
        return callback(new Error("密碼需要包含6-20位數字或字母，至少包含一位字母"));
      }
    }
    Vue.prototype.$webReg = (rule, value, callback) => {
      let reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/; //網址的校驗
      if (reg.test(value)) {
        callback();
      } else {
        return callback(new Error("鏈接地址不正確"));
      }
    }
    Vue.prototype.$dateFormat = (timestamp) => {
      var date = new Date(timestamp); //時間戳為10位需*1000，時間戳為13位的話不需乘1000
      var Y = date.getFullYear() + '-';
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
      var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
      var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
      var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
      return Y + M + D + h + m + s;
    }
    Vue.prototype.$dateFormatDay = (timestamp) => {
      var date = new Date(timestamp); //時間戳為10位需*1000，時間戳為13位的話不需乘1000
      var Y = date.getFullYear() + '-';
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
      return Y + M + D;
    }
  }
}

　　這里面是常用的幾個element-ui自定義驗證和時間格式化的代碼，可以參考寫一下自己需要的格式化或者驗證規則。

　　然后我們需要在main.js引入global，並且使用它

import global from './global'
Vue.use(global)

　　之后我們就可以直接在頁面中使用this.的方法調用這些自定義規則了。