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

posted @ 2021-12-07 14:57 不完美的完美阅读(60) 评论(0) 编辑收藏举报

刷新页面返回顶部

不完美的完美