前端开发过程中经常遇到的问题以及对应解决方法 (持续更新)

1：vue项目中用v-for 循环本地图片， 图片不显示，解决办法：使用require动态引入图片，或将图片放static文件夹里面

<img v-bind:src="require(item.imgurl)">

2:合并多个对象并去重（es6）

    let objOne = {a:1};
    let objTwo = {b:2};
    let objThree = {b:4,c:5};
    let obj = Object.assign(objOne,objTwo,objThree);
    console.log(obj)    // {a:1,b:4,c:5}
	let obj1={...objOne,...objTwo,...objThree};
    console.log(obj1)   // {a:1,b:4,c:5}

3:vue计算属性里如何传参：需求是需要把数值转为三位数，类似1需要变为001，10变为010这样。 下面是正确写法，页面中用{{convertToThree(num1)}}，{{convertToThree(num2)}}，{{convertToThree(num3)}}即可获得对应三位数的模样：

new Vue({
    el:'#app',
    data:{
        num1:0,
        num2:10,
        num3:100
    },
    computed:{
        convertToThree:function(){
            return function(num){
                  if(num>=0 && num <=9){
                    return '00' + num
                  }else if(num>=10 && num <=99){
                    return '0' + num
                  }
                    return num
                }  
        }
    }
})

4:JS监听同源其他窗口发生的事件，主要是利用 window.addEventListener('storage'）进行监听

//需要监听其他窗口发生事件进行对应操作的窗口
storageChange(keyname,fn,value){//keyname为要存储的名字，fn为触发storage后要执行的方法，value可以自己设置存的值，可以利用这个值跨页面传参
    var val = value ? JSON.stringify(value) : new Date().getTime()
    //为keyname设置默认值为当前时间戳
    localStorage.setItem(keyname,val)

    window.addEventListener('storage',function(e){
        if(e.key == key){//判断是否是目标值发生改变
            fn(e.newValue,e.oldValue)//执行fn，返回新值和旧值
        }
    })

}
storageChange('keyname',function(){
    console.log('keyname的值发生了改变')
})

//其他窗口发生事件，即修改localStorage里key的值

localStorage.setItem('keyname',val)

5、js将一维数组转为二维数组

function arrTrans(num, arr) { // 一维数组转换为二维数组
  const iconsArr = []; // 声明数组
  arr.forEach((item, index) => {
    const page = Math.floor(index / num); // 计算该元素为第几个素组内
    if (!iconsArr[page]) { // 判断是否存在
      iconsArr[page] = [];
    }
    iconsArr[page].push(item);
  });
  return iconsArr;
}
arrTrans(6,[1,1,2,3,4,5,6,7,8])

[[1, 1, 2, 3, 4, 5],[6, 7, 8]]

6、小程序中moveToLocation失效问题修复 

uni.getLocation({ //需要先授权
	type:'gcj02',
	success(res) {

		setTimeout(() => { // 1、定时器 绑定经纬度 
			vm.longitude = lon
			vm.latitude = lat
			vm.scale = 16;
		}, 300)
					
		vm.mapContext.moveToLocation({ // 2、移动到指定位置
		   longitude: lon,
		   latitude: lat
	    });
    }
})

7. elementui中防止错误提示框多个弹出，简单粗暴方法，直接调用(Message as any).closeAll()；也可重新Message方法；

  (error) => {
    (Message as any).closeAll() //防止多个提示框同时出现
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }

8. 小程序中一次性上传多张图片（配合promise，循环调uni.download接口）

const uploadImg = async (event) => {
  const token = store.auth.token;

  let { file } = event.detail;
   // 追加照片，fileList为当前文件列表
  fileList.value = fileList.value.concat(file);

  const uploadTasks = file.map((item,i) => {
    item.status = 'uploading'
    return new Promise((resolve,reject) => {
      uni.uploadFile({
        url: "https://***",
        filePath: item.tempFilePath,
        name: "file",
        header: {
          Authorization: "Bearer " + token?.access_token,
        },
        success(res) {
          item.status = "done";
          resolve(res.data);
        },
        fail(err){
          uni.showToast({
            icon:'none',
            title:'上传失败,请重新上传'
          })
        }
      });
    });
  });

  Promise.all(uploadTasks).then((data) => {
    // do something
    data.map((item, i) => {
      file[i] = Object.assign(file[i], item.data);
    });
  });
};

9.el-upload组件在成功上传文件数量等于limit时，仅禁止上传按钮。但在360浏览器中，按钮的disabled并不能阻止浏览器打开文件选择框，可通过动态设置slot属性实现禁止。

  <el-button
      :slot="$attrs.limit == fileList.length ? 'tip' : 'trigger'"
      :disabled="$attrs.limit == fileList.length">
      上传文件
  </el-button>

10.dayjs获取本周、本月、本季度、本年时间段，需注意下时间格式HH和hh的区别。

    let map = {
      "本周": () => {
        start = dayjs().startOf("week").format("YYYY-MM-DD HH:mm:ss");
        end = dayjs().endOf("week").format("YYYY-MM-DD HH:mm:ss");
      },
      "本月": () => {
        start = dayjs().startOf("month").format("YYYY-MM-DD HH:mm:ss");
        end = dayjs().endOf("month").format("YYYY-MM-DD HH:mm:ss");
      },
      "本季度": () => {
        let nowMonth = dayjs().month() + 1; //当前月
        let currentYear = dayjs().startOf("year").format("YYYY");
        let index= 0;
        if (nowMonth < 3) { index= 0;}
        if (2 < nowMonth && nowMonth < 6) { index= 1;}
        if (5 < nowMonth && nowMonth < 9) { index= 2;}
        if (nowMonth > 8) {index= 3;}
        let quarterSeasonStartMonth = index* 3 - 2;
        let quarterSeasonEndMonth = index* 3;
        start = dayjs( currentYear + "-" + quarterSeasonStartMonth)
          .startOf("month")
          .format("YYYY-MM-DD HH:mm:ss");
        end = dayjs( currentYear + "-" + quarterSeasonEndMonth)
          .endOf("month")
          .format("YYYY-MM-DD HH:mm:ss");
      },
      "本年": () => {
         start = dayjs().startOf("year").format("YYYY-MM-DD HH:mm:ss");
         end = dayjs().endOf("year").format("YYYY-MM-DD HH:mm:ss");
      },
    };
    map[val]();