vue2自定义插件

新建utils文件夹global.js

export default {
  install(Vue, options = {}) {
 
 
    Vue.prototype.msgSuccess = function (msg) {
      this.$message({ showClose: true, message: msg, type: "success" });
    }
 
    Vue.prototype.msgError = function (msg) {
      this.$message({ showClose: true, message: msg, type: "error" });
    }
 
    Vue.prototype.msgWarning = function (msg) {
      this.$message({ showClose: true, message: msg, type: "warning" });
    }
 
    Vue.prototype.msgInfo = function (msg) {
      this.$message({ showClose: true, message: msg, type: "info" });
    }
 
    // 日期格式化
    Vue.prototype._parseTime = function (time, pattern) {
      if (arguments.length === 0 || !time) {
        return null
      }
      const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
      let date
      if (typeof time === 'object') {
        date = time
      } else {
        if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
          time = parseInt(time)
        } else if (typeof time === 'string') {
          time = time.replace(new RegExp(/-/gm), '/');
        }
        if ((typeof time === 'number') && (time.toString().length === 10)) {
          time = time * 1000
        }
        date = new Date(time)
      }
      const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay()
      }
      const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
        let value = formatObj[key]
        // Note: getDay() returns 0 on Sunday
        if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
        if (result.length > 0 && value < 10) {
          value = '0' + value
        }
        return value || 0
      })
      return time_str
    }
 
    /**
     * 对象数组根据某一属性排序
     * @param {string} field
     * @param {boolean} rev true表示升序排列，false降序排序
     * @returns {function}
     */
    Vue.prototype._sortBy = function (field, rev) {
      if (rev === undefined) {
        rev = 1;
      } else {
        rev = (rev) ? 1 : -1;
      }
      return function (a, b) {
        let val1 = a[field] * 1;
        let val2 = b[field] * 1;
        if (val1 < val2) {
          return rev * 1;
        } else if (val1 > val2) {
          return rev * -1;
        }
      }
    }
 
    /**
     * 数字千分号
     * @returns {string}
     */
    Vue.prototype._formatNumber = function(num) {
      var decimalPart = '';
      num = num ? num.toString() : '0';
      if (num.indexOf('.') !== -1) {
        decimalPart = '.' + num.split('.')[1];
        num = parseInt(num.split('.')[0]);
      }
      var array = num.toString().split('');
      var index = -3;
      while (array.length + index > 0) {
        // 从单词的最后每隔三个数字添加逗号
        array.splice(index, 0, ',');
        index -= 4;
      }
      return array.join('') + decimalPart;
    };
 
    /**
     * 随机生成三位数
     * @returns {boolean}
     */
    Vue.prototype._mathRandom1000 = function() {
      return (Math.random() * 1000).toFixed(0) * 1
    }
 
    /**
     * 判断是否是手机端
     * @returns {boolean}
     */
    Vue.prototype._isMobile = function() {
      var flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
      if (flag) {
        return true
      }
    }
 
  }
}

1. 消息函数：

   • 定义了 msgSuccess、msgError、msgWarning 和 msgInfo 方法，用于显示不同类型的消息。

2. 日期格式化：

   • _parseTime 函数根据给定的模式格式化日期，支持多种输入类型。

3. 排序：

   • _sortBy 函数允许根据指定字段对对象数组进行升序或降序排序。

4. 数字格式化：

   • _formatNumber 方法格式化数字，添加千分位分隔符。

5. 随机数生成：

   • _mathRandom1000 函数生成一个介于 0 到 999 之间的随机整数。

6. 移动设备检测：

   • _isMobile 方法根据用户代理字符串检查用户是否在移动设备上。

 

示例用法

可以提供一个安装和使用该插件的示例，以帮助用户理解如何在 Vue 应用中使用它。以下是简单的示例：

 

import Vue from 'vue';
import MyPlugin from './path/to/my-plugin';
 
Vue.use(MyPlugin);
 
// 现在你可以在组件中使用这些方法
this.msgSuccess('操作成功！');