pc端遇到的知识点

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

• commonDate.vue

      <template>
        <!-- 年月日 -->
        <el-date-picker v-model="val"
                        :type="type"
                        :value-format="valueType"
                        :format="valueType"
                        :default-time="type === 'datetime' ? '12:00:00' : ''"
                        :clearable="isClear ? false : true"
                        :disabled="disabled ? true : false"
                        @clear="$emit('change', val)"
                        @change="$emit('change', val)"
                        :picker-options="pickerBeginDateBefore"
                        placeholder="选择日期">
        </el-date-picker>
      </template>
  
      <script lang="ts">
        import { Component, Vue, Model, Watch, Prop } from "vue-property-decorator";
        @Component({ name: "MyPost", components: {} })
        export default class extends Vue {
          @Model("change") value;
          val = null;
          @Prop({ type: Boolean, required: false, default: false }) disabled; // 是否禁用
          @Prop({ type: String, required: false, default: "" }) startDate; // 开始时间
          @Prop({ type: String, required: false, default: "" }) endDate; // 结束时间
          @Prop({ type: String, required: true, default: "date" }) type; // 日期类型
          @Prop({ type: Boolean, default: false }) isClear; // 是否有清空
  
          @Watch("value", { immediate: true })
          onChangeValue(value) {
            this.val = value;
          }
          created() {
            this.val = this.value;
          }
          valueType = "yyyy-MM-dd"; // 日期格式
          @Watch("type", { immediate: true })
          getFormat(val) {
            if (val === "date") {
              // 年月日
              this.valueType = "yyyy-MM-dd";
            } else if (val === "datetime") {
              // 年月日时分秒
              this.valueType = "yyyy-MM-dd HH:mm";
            } else if (val === "month") {
              // 年月
              this.valueType = "yyyy-MM";
            } else if (val === "year") {
              // 年
              this.valueType = "yyyy";
            }
          }
          pickerBeginDateBefore = {
            disabledDate: time => {
              const endDateVal = this.endDate;
              const beginDateVal = this.startDate;
              if (beginDateVal && endDateVal) {
                const tmpTime =
                  time.getTime() > new Date(endDateVal).getTime() ||
                  time.getTime() < new Date(beginDateVal).getTime() - 86400000;
  
                return tmpTime;
              }
  
              if (endDateVal) {
                return time.getTime() > new Date(endDateVal).getTime();
              }
              if (beginDateVal) {
                return time.getTime() < new Date(beginDateVal).getTime() - 86400000;
              }
            },
          };
        }
      </script>
  

• 使用时间组件

• 年月日 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、 封装组件

<template>
  <el-select v-model="val"
            filterable
            clearable
            @change="onChange"
            placeholder="请选择">
    <el-option v-for="item in List"
              :key="item.id"
              :label="item.name"
              :value="item.id">
    </el-option>
  </el-select>
</template>

<script lang="ts">
  import { Component, Vue, Model, Watch } from "vue-property-decorator";
  @Component({ name: "", components: {} })
  export default class extends Vue {
    @Model("change") value;
    val = null;
    @Watch("value", { immediate: true })
    onChangeValue(value) {
      this.val = value;
    }
    List = [
      {
        id: 1,
        name: "国产",
      },
      {
        id: 2,
        name: "进口",
      },
    ];
    created() {
      this.val = this.value;
    }

    onChange() {
      this.$emit("change", this.val);
    }
  }
</script>

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-card class="box-card"
            v-for="(item,index) in addObj.billList"
            :key="index"
            shadow="never">
      <el-form-item label="合同数量："
                    :prop="'billList.' + index + '.contractNum'"
                    :rules="[{ required: true, message: '请输入合同数量', trigger: 'blur' }]">
        <el-input v-model.trim="item.contractNum"
                  placeholder="请输入"
                  type="number"
                  inputmode="decimal"
                  step="0.01"
                  @mousewheel.native.prevent
                  clearable></el-input>
      </el-form-item>
      <el-form-item label="合同单价："
                    :prop="`billList[${index}].contractPrice`"
                    :rules="[{ required: true, message: '请输入合同单价', trigger: 'blur' }]">
        <el-input v-model.trim="item.contractPrice"
                  placeholder="请输入"
                  type="number"
                  inputmode="decimal"
                  step="0.01"
                  @mousewheel.native.prevent
                  clearable></el-input>
      </el-form-item>
  
    </el-card>
      <el-form-item label="车队长联系方式:"
                    :rules="[ { required: true, message: "请输入车队长联系方式", trigger: "blur" },{ validator: this.onChangePhone, trigger: "blur" }]"
                    prop="captainPhone">
        <el-input v-model.trim="addObj.captainPhone"
                  placeholder="请输入"
                  maxlength="11"
                  clearable></el-input>
      </el-form-item>
  </el-form>
  

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