vue的常用方法

122 阅读1分钟

1.确认框 函数

Vue.prototype.$theConfirm = (config, type) => {
  let { title, content, leftBtn, rightBtn } = config;
  title = title ? title : '提示';
  content = content ? content : '确定如此操作';
  leftBtn = leftBtn ? leftBtn : '确定';
  rightBtn = rightBtn ? rightBtn : '取消';
  return new Promise((resolve, reject) => {
    vm.$confirm(content, title, {
      confirmButtonText: leftBtn,
      cancelButtonText: rightBtn,
      cancelButtonClass: 'el-button--border cancel-Button-Class',
      type: type,
      center: true
    }).then(() => {
      resolve()
    }).catch(() => {
      reject()
    })
  })

}

2.解决传参

// 解决传参 [key][0][val]  =>  key[0].val
// 调用示例: $dataTransform(this.addOrEditData, 'buttons');
Vue.prototype.$dataTransform = (object, property) => {
  if (Array.isArray(object[property])) {
    object[property].forEach((val, i) => {
      for (var j in val) {
        object[property + "[" + i + "]." + j] = val[j];
      }
    });
    delete object[property];
  }
  if (object[property] instanceof Object) {
    for (const key in object[property]) {
      if (object[property].hasOwnProperty(key)) {
        const element = object[property][key];
        object[property + "." + key] = element;
      }
    }
    delete object[property];
  }
}

3.判断数据不存在 或 为空值

Vue.prototype.$dataIsNull = (data) => {
  if (typeof data === "undefined") {
    return true;
  } else if (data instanceof Array) {
    if (data.length === 0) return true;
  } else if (data instanceof Object) {
    if (JSON.stringify(data) === '{}') return true;
  } else if (data === 'null' || data === null || data === 'undefined' || data === '') {
    return true;
  } else {
    return false;
  }
}

4.用于后台获取的数据应用于页面数据,避免直接赋值带来的属性缺失

/**
  * @description: 用于后台获取的数据应用于页面数据,避免直接赋值带来的属性缺失
  * @param {Object} pageData [页面初始化的数据,与接口相匹配]
  * @param {Object} getData [后台获取的数据,由于未初始化的数据后台不做返回,可能缺失重要属性]
  * @return: [补全必要字段的后台数据]
  */
 Vue.prototype.$mergeObject = (pageData, getData) => {
  for (const item in pageData) {
    if (!getData.hasOwnProperty(item)) {
      getData[item] = pageData[item];
    }
  }
  return getData
**}**

5.日期时间相关方法

// 日期时间相关方法
Vue.prototype.$date = {
  // 时间格式化
  format: (date, fmt = "yyyy-MM-dd hh:mm:ss") => {
    if (!date || date == null) {
      return date;
    }
    date = new Date(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()
    };
    let padLeftZero = (str) => {
      return ('00' + str).substr(str.length);
    };
    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 : padLeftZero(str));
      }
    }
    return fmt;
  },