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

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 = lonvm.latitude = latvm.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)}

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

2021-10-27诺诺机柜常见问题及解决方法-持续更新中
诺诺机柜常见问题及解决方法 . 一.错码09c007 Q:税控设备开具发票时时异常盘错误代码:09c007 1.1代码释义:控制开票标志启用,禁止开票 1.2处理方法:风险纳税人,需要去税局处理 . ...
开发过程中任何一个时刻，只关注解决当前面临的问题。
开发过程中任何一个时刻,只关注解决当前面临的问题. 转载于:https://www.cnblogs.com/philosophywang/archive/2011/11/30/2269009.html
vue php跨域,Vue 项目中遇到的跨域问题及解决方法(后台php)
问题描述前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: Th ...
edittext 监听无效_Android中EditText 设置 imeOptions 无效问题的解决方法
有时候我们需要在EditText 输出完之后需要在键盘出现右下角变成"Go"或"前往搜索时:通常我们需要设置Android:imeOptions属性.Androi ...
【前端】layui日期控件点击一闪而过解决方法
[前端]layui日期控件点击一闪而过解决方法参考文章: (1)[前端]layui日期控件点击一闪而过解决方法 (2)https://www.cnblogs.com/nb123/p/12159683 ...
opengl中的Floatbuffer和IntBuffer与java中数据的存储方式不同的解决方法，编辑一个自己的BufferUtil工具类
opengl中的Floatbuffer和IntBuffer与java中数据的存储方式不同的解决方法,编辑一个自己的BufferUtil工具类参考文章: (1)opengl中的Floatbuffer和 ...
js中hover事件时候的BUG以及解决方法
js中hover事件时候的BUG以及解决方法参考文章: (1)js中hover事件时候的BUG以及解决方法 (2)https://www.cnblogs.com/mmykdbc/p/7464050. ...
手机端网页中图片之间出现白线的解决方法
手机端网页中图片之间出现白线的解决方法参考文章: (1)手机端网页中图片之间出现白线的解决方法 (2)https://www.cnblogs.com/syzdidi/p/9686463.html 备 ...
Json返回时间中出现乱码问题的两种解决方法
Json返回时间中出现乱码问题的两种解决方法参考文章: (1)Json返回时间中出现乱码问题的两种解决方法 (2)https://www.cnblogs.com/hanyinglong/archiv ...
ubuntu中wifi显示被硬件禁用的解决方法
ubuntu中wifi显示被硬件禁用的解决方法参考文章: (1)ubuntu中wifi显示被硬件禁用的解决方法 (2)https://www.cnblogs.com/houji/p/7643443. ...

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

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

最新文章

热门文章