对象去重、图片本地转base64、日期格式化、点击复制文本、点击下载、时间戳10位转换

    //处理数据
    //1 对象 去重 
       let data = []
        datalist.value.forEach(item => {
            data.push({name:item.grain_info.name,id:item.grain_id})
        });
 
       data = data.filter((item, index, self) =>
        index === self.findIndex(obj => obj.name === item.name)
        );
      //2 判断数组是是否包含某个字段的值 有 返回 true
         const hasIdOne = dataList.value.some(item => item.id == val)
      //3数组里面2个值交换位置 由下到上
        arr.splice(i - 1, 1, ...arr.splice(i, 1, arr[i - 1]))
       //数组里面2个值交换位置 由上到下
        arr.splice(i - 1, 1, ...arr.splice(i - 2, 1, arr[i - 1]))
       //4 字符串替换为*
      // str:字符串, frontLen :保留的前几位 endLen:保留的前几位 mark:替换符号
     function plusXing(str, frontLen, endLen, mark) {
      let len = str.length - frontLen - endLen;
      let marks= "";
      for (let i = 0; i < len; i++) {
        marks+= mark;
      }
      return (
        str.substring(0, frontLen) + marks+ str.substring(str.length - endLen)
      );
    }
       //5 Array.includes() 进行存在检查  方法用于确定数组的条目中是否包含某个值。它根据需要返回 //true 或 false。
         let array = [1, 2, 3, 4, 5];

console.log(array.includes(2)); // Outputs: true
console.log(array.includes(6)); // Outputs: false
       // 6 Object.assign()合并对象是一种用于将所有可枚举自身属性的值从一个或多个源对象复制到
//目标对象的方法。它将返回目标对象。此方法通常用于合并对象(组合两个或多个对象的属性)
        let obj1 = { a: 1, b: 2 };
        let obj2 = { b: 3, c: 4 };

        let mergedObj = Object.assign({}, obj1, obj2);

        console.log(mergedObj); // { a: 1, b: 3, c: 4 }

      // 7  flat() 展平数组 它创建一个新数组,其中所有子数组元素递归地连接到指定深度。默认情况 
  //下,深度为 1 
       let arr = [1, 2, [3, 4, [5, 6]]];

console.log(arr.flat());
// Output: [1, 2, 3, 4, [5, 6]]

console.log(arr.flat(2));
// Output: [1, 2, 3, 4, 5, 6]

console.log(arr.flat(Infinity));
 //       在第一个 console.log 中,我们在不带任何参数的情况下调用 flat(),因此它的深度默认为 //1,并且只有第一层嵌套数组会被展平。

//在第二个 console.log 中,我们调用 flat(2),指定深度为 2,因此它会展平最多两层嵌套数组。

//在第三个console.log中,通过传递Infinity,它将展平所有嵌套数组,无论它们有多深。
    //8 函数参数的剩余参数 剩余参数语法允许我们将不定数量的参数表示为数组。function sum(...args) {
  let total = 0;
  for(let arg of args) {
    total += arg;
  }
  return total;
}

console.log(sum(1, 2, 3, 4)); // Output: 10
console.log(sum(1, 2, 3, 4, 5)); // Output: 15
  // 9  使用 Promise.all() 实现并发 Promise
let promise1 = Promise.resolve(3);
let promise2 = 42;
let promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values); // Output: [3, 42, "foo"]
});
 // 10 使用Object.entries()和Object.fromEntries()
//Object.entries() 是一种方法,它返回给定对象自己的可枚举字符串键控属性 [key, value] 对的数  // 组,其顺序与 for...in 循环提供的顺序相同。唯一重要的区别是for...in 循环也枚举原型链中的性。
let obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // Output: [ ['foo', 'bar'], ['baz', 42] ]
// Object.fromEntries()
//Object.fromEntries() 执行 Object.entries() 的逆操作。它将键值对列表转换为对象。
let entries = [ ['foo', 'bar'], ['baz', 42] ];
let obj = Object.fromEntries(entries);
console.log(obj); // Output: { foo: 'bar', baz: 42 }
// 上传图片转base64本地展示

tool .imgBase64 =(file)=>{
  console.log(file);
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => {
      resolve(reader.result)
    };
    reader.onerror = function (error) {
      reject(error);
    };
  })
}
/* 日期格式化 */
tool.dateFormat = (date, fmt = 'yyyy-MM-dd hh:mm:ss', isDefault = '-') => {
  if (date.toString().length == 10) {
    date = date * 1000
  }
  date = new Date(date)

  if (date.valueOf() < 1) {
    return isDefault
  }
  let o = {
    "M+": date.getMonth() + 1,                 //月份
    "d+": date.getDate(),                    //日
    "h+": date.getHours(),                   //小时
    "m+": date.getMinutes(),                 //分
    "s+": date.getSeconds(),                 //秒
    "q+": Math.floor((date.getMonth() + 3) / 3), //季度
    "S": date.getMilliseconds()             //毫秒
  };
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
  }
  for (let k in o) {
    if (new RegExp("(" + k + ")").test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    }
  }
  return fmt;
}
// 返回查询时间数组 
 tool.getArrayTime =(time) =>{
  const oneDay = 24 * 60 * 60 * 1000;
  let endTime = new Date(Date.now());
  endTime = tool.dateFormat(endTime, "yyyy-MM-dd hh:mm:ss");
  let startTime = new Date(Date.now() - time * oneDay);
  startTime = tool.dateFormat(startTime, "yyyy-MM-dd hh:mm:ss");
  // const days = [startTime, endTime];
  return [startTime, endTime]
 
}
// 点击复制文本 
tool.copyText = (textToCopy)=>{
  var input = document.createElement("input"); // 创建input对象
   input.value = textToCopy; // 设置复制内容
   document.body.appendChild(input); // 添加临时实例
   input.select(); 
   document.execCommand("Copy"); 
   document.body.removeChild(input); 
   Message.success('复制成功!');

}
// 点击下载
tool.downloadQr=(name)=>{
  var oQrcode = document.querySelector("#qrcode");
  var url = oQrcode.src;
  var a = document.createElement("a");
  var event = new MouseEvent("click");
  a.download = name ;
  a.href = url;
  a.dispatchEvent(event);
}
/**
 * 转10位Unix时间戳
 */

tool.toUnixTime = (date) => {
  return Math.floor((new Date(date)).getTime() / 1000)
}
   //vue2 前端本地压缩图片
    <el-upload
                  ref="upload"
                  class="upload-demo"
                  action="#"
                  :show-file-list="showfilelist"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                
                  :file-list="fileList"
                  :auto-upload="false"
                  :on-change="changUpload"
                >
                  <div slot="trigger" class="up">选取文件</div>
                </el-upload>

      submitUpload() {
      this.$refs.upload.submit();
      this.handlePreview();
    },
   // 图片删除时
    handleRemove(file, fileList) {

      this.fileList = [];
 
    },
 changUpload(file, fileList) {
      this.compressAndUpload(file.raw);
      this.fixImg = file.name;
    },
 compressAndUpload(file) {
      const reader = new FileReader();
      reader.onload = (event) => {
        const compressedImage = new Image();
        compressedImage.src = event.target.result;
        console.log(
          compressedImage.src,
          compressedImage,
          " compressedImage.src"
        );
        compressedImage.onload = () => {
          const canvas = document.createElement("canvas");
          const ctx = canvas.getContext("2d");
          canvas.width = compressedImage.width;
          canvas.height = compressedImage.height;
          ctx.drawImage(
            compressedImage,
            0,
            0,
            compressedImage.width,
            compressedImage.height
          );
          const compressedDataUrl = canvas.toDataURL("image/jpeg", 0.6);

          this.img = compressedDataUrl;
          this.baseForm.imgTemp = compressedDataUrl;
          const base64ToFile = (dataUrl, filename) => {
            const arr = dataUrl.split(",");
            const mime = arr[0].match(/:(.*?);/)[1];
            const bstr = atob(arr[1]);
            let n = bstr.length;
            const u8arr = new Uint8Array(n);
            while (n--) {
              u8arr[n] = bstr.charCodeAt(n);
            }
            return new File([u8arr], filename, { type: mime });
          };
          const compressedFile = base64ToFile(compressedDataUrl, file.name);
          // console.log("base64ToFile", compressedDataUrl);
          // console.log("compressedFile", compressedFile);
          const formData = new FormData();
          formData.append("file", compressedFile, compressedFile.name);
        };
      };

      reader.readAsDataURL(file);
    },

    // dom转换为img canvas画图之后直接打印图片 使用html2canvas、print-js 插件
        import html2canvas from 'html2canvas' 
        import printJS from 'print-js'
    const changeDomByImg = (data) => {
    loading.value = true
    const element = document.querySelector(`#index${data.id}`);
    html2canvas(element,
    ).then((canvas) => {
      const image = canvas.toDataURL('image/png'); //可以使dom转换的类型
      
      setTimeout(() => {
        printJS({
          printable: [image], // 数组支持多个打印
          type: 'image',
          style: 'width:400px;height:400px',
          scanStyles: false,
        })
        loading.value =false
      }, 1500)
    });
  }

  • 10
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值