pc端遇到的知识点

1、封装时间组件(基于 element)

• commonDate.vue

• 使用时间组件

• 年月日 2021-12-07 <common-date v-model="today"></common-date>

• 年月日时分 2021-12-07 11:23 <common-date v-model="today" type="datetime"></common-date>

• 年月 2021-12 <common-date v-model="today" type="month"></common-date>

• 年 2021 <common-date v-model="today" type="year"></common-date>

• 开始时间结束时间 <common-date v-model="startTime" :end-date="endTime"></common-date><common-date v-model="endTime" :start-date="formObj.startTime"></common-date>

2、快速获取日期

• moment 常见使用方法

• 获取当前日期和时间：moment()
• 获取某月的天数： daysInMoth()
• 获取某月的第一天：startOf("month")

• 获取某月的最后一天： endOf("month")
• 获取某天是星期几：weekday()
• 增加时间：add(Number,String)
• 减去时间：subtract(Number,String)
• 设置中文的语言环境： locale("zh-ch")
• 获取星期数据：weekdaysMin()
• 显示格式： format();
• 上个月的第一天: moment(new Date()).substract(1,'months).date(1)
• 上个月的最后一天：moment(new Date()).date(0)
• 获取上月： moment().add(-1,"months")
• 获取上月： moment().subtract(1,"months")
• 获取下月： moment().add(1,"momths")

• 当天： this.$moment(new Date()).format("YYYY-MM-DD")

• 昨天：this.$moment(new Date()).subtract(1, "d").format("YYYY-MM-DD")

• 前天： this.$moment(new Date())subtract(2, "d").format("YYYY-MM-DD")

• 明天：this.$moment(new Date()).add(1, "d").format("YYYY-MM-DD")

• 后天： this.$moment(new Date()).add(2, "d").format("YYYY-MM-DD")

• 本周： this.$moment(new Date()).startOf("week").format("YYYY-MM-DD")~this.$moment(new Date()).endOf("week").format("YYYY-MM-DD")

• 上周： this.$moment().week(this.$moment().week() - 1).startOf("week").format("YYYY-MM-DD") ~ this.$moment().week(this.$moment().week() - 1).endOf("week").format("YYYY-MM-DD")

• 本月：this.$moment(new Date()).startOf("month").format("YYYY-MM-DD") ~ this.$moment(new Date()).endOf("month").format("YYYY-MM-DD")

• 上月：this.$moment().month(this.$moment().month() - 1).startOf("month").format("YYYY-MM-DD") ~ this.$moment().month(this.$moment().month() - 1).endOf("month").format("YYYY-MM-DD")

• 本季度：this.$moment().quarter(this.$moment().quarter()).startOf("quarter").format("YYYY-MM-DD") ~ this.$moment().quarter(this.$moment().quarter()).endOf("quarter").format("YYYY-MM-DD")

  newToday = this.$moment(new Date()).format("YYYY-MM-DD"); // 当天
  tomorrow = this.$moment(new Date()).add(1, "d").format("YYYY-MM-DD"); // 明天
  afterday = this.$moment(new Date()).add(2, "d").format("YYYY-MM-DD"); // 后天
  startWeek = this.$moment(new Date()).startOf("week").format("YYYY-MM-DD"); // 本周
  endWeek = this.$moment(new Date()).endOf("week").format("YYYY-MM-DD");
  lastStartWeek = this.$moment()
  .week(this.$moment().week() - 1)
  .startOf("week")
  .format("YYYY-MM-DD"); // 上周
  lastEndWeek = this.$moment()
  .week(this.$moment().week() - 1)
  .endOf("week")
  .format("YYYY-MM-DD");
  startMonth = this.$moment(new Date()).startOf("month").format("YYYY-MM-DD"); // 本月
  endMonth = this.$moment(new Date()).endOf("month").format("YYYY-MM-DD");
  lastStartMonth = this.$moment()
  .month(this.$moment().month() - 1)
  .startOf("month")
  .format("YYYY-MM-DD"); // 上月
  lastEndMonth = this.$moment()
  .month(this.$moment().month() - 1)
  .endOf("month")
  .format("YYYY-MM-DD");
  lastStartQuarter = this.$moment()
  .quarter(this.$moment().quarter() - 1)
  .startOf("quarter")
  .format("YYYY-MM-DD"); // 上个季度
  lastEndQuarter = this.$moment()
  .quarter(this.$moment().quarter() - 1)
  .endOf("quarter")
  .format("YYYY-MM-DD");

3、数字输入框禁止鼠标滚动

• <el-input v-model.trim="test" placeholder="请输入" type="number" inputmode="decimal" step="0.01" @mousewheel.native.prevent clearable>

• 解决固定列遮盖底部滚定条导致滚动条无法滚动的问题

  .el-table__body-wrapper {
  z-index: 2;
  overflow-y: auto;
  }

4、 封装组件

5、form 上验证数组

• :prop="'options.' + index + '.name'"

• :prop="options[${index}].name"

• form 表单上禁用回车提交 @submit.native.prevent

  <el-form class="carriag-box"
  :model="addObj"
  inline
  @submit.native.prevent
  :rules="rules"
  :label-width="$px2rem('110px')"
  ref="ruleForm">
  
  
  <el-input v-model.trim="item.contractNum"
  placeholder="请输入"
  type="number"
  inputmode="decimal"
  step="0.01"
  @mousewheel.native.prevent
  clearable>
  
  
  <el-input v-model.trim="item.contractPrice"
  placeholder="请输入"
  type="number"
  inputmode="decimal"
  step="0.01"
  @mousewheel.native.prevent
  clearable>
  

  
  <el-form-item label="车队长联系方式:"
  :rules="[ { required: true, message: "请输入车队长联系方式", trigger: "blur" },{ validator: this.onChangePhone, trigger: "blur" }]"
  prop="captainPhone">
  
  
  

js

/**
* 判断手机号是否正确
*/
regphoto = /^1[3-9]\d{9}$/; // 判断手机号
onChangePhone(rule, value, callback) {
if (!this.regphoto.test(value)) {
callback(new Error("请输入正确的手机号"));
} else {
callback();
}
}

6、重置数据

Object.keys(this.addObj).map(el => {
this.addObj[el] = null;
});

• 重置表单 this.$refs.ruleForm.resetFields();

• 清空表单验证 this.$refs.ruleForm.clearValidate();

7、vue 图片下载到本地，图片保存到本地

• 必须同源（访问的网站域名与服务器域名一致）才能下载

  downs() {
  var alink = document.createElement("a");
  alink.href = this.shop.shoppic_url;
  alink.download = "pic"; //图片名
  alink.click();
  }

• 解决图片不同源下载问题

  downs(){
  this.downloadIamge(this.pic.url, 'pic')
  }
  downloadIamge(imgsrc, name) {//下载图片地址和图片名
  var image = new Image();
  // 解决跨域 Canvas 污染问题
  image.setAttribute("crossOrigin", "anonymous");
  image.onload = function() {
  var canvas = document.createElement("canvas");
  canvas.width = image.width;
  canvas.height = image.height;
  var context = canvas.getContext("2d");
  context.drawImage(image, 0, 0, image.width, image.height);
  var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据

  var a = document.createElement("a"); // 生成一个a元素
  var event = new MouseEvent("click"); // 创建一个单击事件
  a.download = name || "photo"; // 设置图片名称
  a.href = url; // 将生成的URL设置为a.href属性
  a.dispatchEvent(event); // 触发a的单击事件
  };
  image.src = imgsrc;
  }

• 下载附件

  getBlob(url) {
  return new Promise(resolve => {
  const xhr = new XMLHttpRequest();

  xhr.open("GET", url, true);
  xhr.responseType = "blob";
  xhr.onload = () => {
  if (xhr.status === 200) {
  resolve(xhr.response);
  }
  };

  xhr.send();
  });
  }
  saveAs(blob, filename) {
  if (window.navigator.msSaveOrOpenBlob) {
  navigator.msSaveBlob(blob, filename);
  } else {
  const link = document.createElement("a");
  const body = document.querySelector("body");

  link.href = window.URL.createObjectURL(blob);
  link.download = filename;

  // fix Firefox
  link.style.display = "none";
  body.appendChild(link);

  link.click();
  body.removeChild(link);

  window.URL.revokeObjectURL(link.href);
  }
  }
  download(url, filename) {
  const loading = this.$loading({
  lock: true,
  text: "下载中请稍等......",
  spinner: "el-icon-loading",
  background: "rgba(0, 0, 0, 0.7)",
  });
  this.getBlob(url)
  .then(blob => {
  this.saveAs(blob, filename);
  })
  .finally(() => {
  loading.close();
  });
  }

• 缺点非同源会有跨域问题(可以设置资源允许跨域，如果可以设置的话)

• 会预先加载（下载）文件，如果文件比较大，等待时间会比较长 (可以设置 loading 方式解决，不过好像也不是很完美)

8、请空数组里的空对象

isEmpty(obj) {
let empty = true;
for (const key in obj) {
if (obj[key] && obj[key].length > 0) {
empty = false;
break;
}
}
return empty;
}
// 去除空对象
onFilter(array) {
return array.filter(item => !this.isEmpty(item));
}
// 使用 this.onFilter(newArray)

9、数组去重

removalData(arrData) {
const hash = {};
arrData = arrData.reduce((item, next) => {
// businessType是你要以什么属性去重
// if (!hash[next.businessType]) {
// hash[next.businessType] = true;
// item.push(next);
// }
// return item;
hash[next.key] ? "" : (hash[next.key] = true && item.push(next));
return item;
}, []);
return arrData;
}

10、数组去除重复的对象

objHeavy(arr) {
const newArr = []; // 存新数组
const obj = {}; // 存处理后转成字符串的对象
for (let i = 0; i < arr.length; i++) {
const keys = Object.keys(arr[i]);
keys.sort(function (a, b) {
return Number(a) - Number(b);
});
let str = "";
for (let j = 0; j < keys.length; j++) {
str += JSON.stringify(keys[j]);
str += JSON.stringify(arr[i][keys[j]]);
}
if (!obj.hasOwnProperty(str)) {
newArr.push(arr[i]);
obj[str] = true;
}
}
return newArr;
}

11、时间排序

1.倒序 倒序是从大到小

sort(property) {
return (a,b) => {
return a[property] < b[property] ? 1 : -1;
}
};

• 时间倒序

  sortKey(array, key) {
  return array.sort(function(a, b) {
  var x = a[key];
  var y = b[key];
  return x > y ? -1 : x < y ? 1 : 0;
  });
  }

• 2.升序 倒序是从小到大

  sort(property) {
  return (a,b) => {
  return a[property] > b[property] ? 1 : -1;
  }
  }

• 时间升序

  sortKey(array: any, key: any) {
  return array.sort(function (a, b) {
  var x = a[key];
  var y = b[key];
  return x < y ? -1 : x > y ? 1 : 0;
  });
  }

• 排序

  Object.keys(sortedList).map(item=>{
  sortedList[item] = sortedList[item].sort(x,y)=>{
  return Date.parse(x.createTime) - Date.parse(y.createTime)
  })
  })