前端开发过程中经常遇到的问题以及对应解决方法 (持续更新)
1:vue项目中用v-for 循环本地图片, 图片不显示,解决办法:使用require动态引入图片,或将图片放static文件夹里面<imgv-bind:src="require(item.imgurl)">2:合并多个对象并去重(es6)let objOne = {a:1};let objTwo = {b:2};let objT...
·
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]();
更多推荐
已为社区贡献1条内容
所有评论(0)