思享工具箱

pc端遇到的知识点

摘要：
1.封装时间组件commonDate。vue＜template＞＜！

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  
        :model="addObj"
        inline
        @submit.native.prevent
        :rules="rules"
        :label-width="$px2rem('110px')"
        ref="ruleForm">
  <el-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)
      })
  })

标签：#date#moment#const#form | 浏览：117 | 发布日期：

免责声明：文章转载自《pc端遇到的知识点》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇Apache HTTP服务器扩展模块的工具-apxsEasyICE_2.3.3.0 版本发布下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

C++中extern关键字用法小结

总结C++中关于extern关键字的用法。 1.变量的生明和定义中 C++语言支持分离式编译机制，该机制允许将程序分割为若干个文件，每个文件可被独立编译。为了将程序分为许多文件，则需要在文件中共享代码，例如一个文件的代码可能需要另一个文件中中定义的变量。 为了支持分离式编译，C++允许将声明和定义分离开来。变量的声明规定了变量的类型和名字，即使一个名字为程...

react.js antd-table 可编辑表格验证

最近做需求,需要在一个表格里编辑字段,验证提交.项目用的是antd的组件,看了下table组件,官网有给编辑的例子,好咧,拿过来用了下,发现问题.官网的实现写得很复杂,而且最主要的一点是只能在输入框获取焦点时调验证规则.但是在表格外面不能调用验证方法调用.与实际需求不符合,于是自己写了一个,记录下来. 需求:表格输入时验证字段,提交时点击验证字段 主要...

Excel VBA语句集300

定制模块行为(1) Option Explicit '强制对模块内所有变量进行声明     Option Private Module '标记模块为私有，仅对同一工程中其它模块有用，在宏对话框中不显示     Option Compare Text '字符串不区分大小写     Option Base 1 '指定数组的第一个下标为1(2) On Error...

[ PyQt入门教程 ] PyQt5中多线程模块QThread使用方法

本文主要讲解使用多线程模块QThread解决PyQt界面程序唉执行耗时操作时，程序卡顿出现的无响应以及界面输出无法实时显示的问题。用户使用工具过程中出现这些问题时会误以为程序出错，从而把程序关闭。这样，导致工具的用户使用体验不好。下面我们通过模拟上述出现的问题并讲述使用多线程QThread模块解决此类问题的方法。 PyQt程序卡顿和无法实时显示问题现象 使...

js 添加天数

//日期加上天数得到新的日期 //dateTemp 需要参加计算的日期，days要添加的天数，返回新的日期，日期格式：YYYY-MM-DD function getNewDay(dateTemp, days) { var dateTemp = dateTemp.split("-"); var nDate = new...

php 时间轴，数据统计（最近7天的数据）

每天的数据都有插入到stat表，但是stat表并不一定有每天数据，不全。所以在groupby 按天分组以后，需要置0，取出最近7天的数据。代码如下： /** *获取最近一周的数据/从昨天算起的7天 */ function get_weeks($time = '', $format='Y-m-d'){ $time = $time != '' ? $time...

最新文章

随机推荐

思享工具箱导航