前端开发会遇到的问题_前端工作中遇到的技术难点

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]();

到此这篇前端开发会遇到的问题_前端工作中遇到的技术难点的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！

上一篇：好用的vscode插件_vscode安装本地插件

下一篇：常见的web前端开发框架：Vue.js_web前端三大主流框架vue

版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdkf/2971.html

相关文章：