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()

发布了53 篇原创文章 · 获赞 88 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/qq_43702430/article/details/93879436