vue中插件製作以及比較實用的方法

/**
 * 公共方法
 */
export default {
  install(Vue, options) {
    /**
     * 返回上一頁
     */
    Vue.prototype.back = function() {
      this.$router.go(-1)
    };
    /**
     * 設置cookie
     * @param name
     * @param value
     * @returns {boolean}
     */
    Vue.setCookie = function(name, value) {
      document.cookie = name + "=" + encodeURIComponent(value) + ";path=/";
      return true;
    };

    /**
     * 獲取cookie
     * @param name
     * @returns {null}
     */
    Vue.getCookie = function(name) {
      var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)"); // 正則匹配
      if (arr = document.cookie.match(reg)) {
        return unescape(arr[2]);
      } else {
        return null;
      }
    };

    Vue.formatDate = function(date, fmt) {
      if (!date) return date;
      if (typeof date === "string") return date;

      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
      }
      let o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
      };
      for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
          let str = o[k] + '';
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : ('00' + str).substr(str.length));
        }
      }
      return fmt;
    };
    /**
     * 傳入年份/月份獲取當月第一天周幾,最後一天周幾,該月有多少天
     * 形如:
     *  "月份(1,2,...)": {
              "firstDayWeek": 0,
              "lastDayWeek": 2,
              "days": 31
            },
     * @param year
     * @param month
     */
    Vue.prototype.getMonthDetail = function(year, month) {
      var da = new Date();
      da.setFullYear(year);
      da.setMonth(month - 1);
      da.setDate(1);
      //第一天周幾
      var firstDayWeek = da.getDay();
      da.setMonth(month);
      da.setDate(0);
      var days = da.getDate();
      var lastDayWeek = da.getDay();
      var json = {};
      json.firstDayWeek = firstDayWeek;
      json.lastDayWeek = lastDayWeek;
      json.days = days;
      return json;
    };
    /**
     * 對象淺拷貝,將source對象中所有的屬性值都複製到target對象中,target對象中不存在的屬性忽略
     * @param target  目標對象
     * @param source  源對象
     */
    Vue.prototype.copyObject = function(target, source) {
      Object.keys(target).forEach((key) => {
        target[key] = source[key];
      });
      return target;
    };
    /**
     * 對象內容合併
     * @param target
     * @param source
     */
    Vue.prototype.mergeObject = function(target, source) {
      Object.keys(source).forEach((key) => {
        target[key] = source[key];
      });
      return target;
    };
    /**
     * 清除對象中所有屬性的值
     * @param object
     */
    Vue.prototype.clearObject = function(object) {
      Object.keys(object).forEach((key) => {
        object[key] = null;
      });
    };
    /**
     * 字符串進行url轉碼
     * @param value
     */
    Vue.prototype.encodeURI = function(value) {
        return (value ? encodeURI(value) : value);
      }

    /**
     * 判斷參數是否爲空
     *
     * @param param
     * @returns {boolean}
     */
    Vue.prototype.isEmpty = function(param) {
      if (undefined == param || null == param || param.toString().trim().length == 0) {
        return true;
      }
      return false;
    };
    /**
     * 遞歸刪除樹形數據中的某一項值
     * @param  data
     * @param  row
     */
    Vue.prototype.recursivelyDeleteData = function(data, row) {
	      let index = data.indexOf(row)
	      if (index !== -1) {
	        data.splice(index, 1)
	        return 'success'
	      }
	      for (let item of data) {
	        if (item.children && Array.isArray(item.children)) {
	          let result = this.recursivelyDeleteData(item.children, row)
	          if (result === 'success') {
	            return result
	          }
	        }
	      } 
     };
  }
}

使用Vue.use(MyPlugin)進行調用,當然先使用import MyPlugin from 插件文件
調用時直接使用即可例如this.back()

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章