前端开发踩坑记录

本文章记录一些项目踩过坑，帮助他人解决问题

ios时间问题

ios使用时间转换需要将-换成/否则会出现时间解析不了，这个坑当时找了很久才解决

 new Date('2019-01-01 01:01') // 解析失败
 new Date('2019/01/01 01:01') // 解析成功

禁用浏览器cookie（navigator.cookieEnabled)

在某些iphone手机出现页面白屏无法加载的问题，最后找到问题是因为用户点击开启了阻止浏览器cookie

项目中加上判断如果navigator.cookieEnabled=false说明浏览器禁用了cookie，导致localStorage直接报错，document.cookie无法获取到值
解决：
在页面入口文件加入判断如果cookie被禁用，提示用户关闭禁用浏览器cookie配置

移动端滚动问题

window.scrollTo()在PC端没问题，但是在移动端就没效果。

1. 使用setTimeout延时可以解决
2. 计算dom的offsetTop，给需要滚动的dom赋值scrollTop等于offsetTop

vue动态表单监听不到问题

使用this.$set(object, key, value) 循环添加formitem可以实时监听属性变化。直接使用object[key] = value，无法实施监听变化

// api返回动态表单
data () {
	return {
		userForm: {}
	}
}
res.data = [{key: 'name', value: ''},{key: 'age', value: ''}]
res.data.forEach(item => {
	this.$set(this.userForm, item.key, item.value) 
})

上传图片并显示

<input type="file" name="" id="file">
<img src="" id="img">

document.getElementById('file').onchange =  function (e) {
    var src = window.URL.createObjectURL(e.target.files[0])
    document.getElementById('img').src = src
}

Css样式不生效

1. 被同名样式覆盖
2. 存在优先级更高的
3. !important
4. 引入文件路径错误

可以右键查看元素的当前样式查找问题，修改样式可以直接在浏览器调试修改好了以后再复制到项目

修改插件的样式

插件本身有实现方法，但是现实的效果和需求有差异。可以隐藏插件的不一致效果，自己实现通过点击自己的dom触发插件的方法实现效果，一般修改不建议修改插件原有的样式效果。

ps:
表格的导出按钮
差异： 插件导出当前页数据，需求是导出所有或者是符合检索条件的数据。
解决： 隐藏插件导出按钮，自己写一个通过ajax获取数据调用转excel方法实现导出
轮播的箭头
差异：插件箭头一般在左右，需求是顶部或者底部靠右边合并在一起，dot靠左边
解决：隐藏插件箭头及dot，自己实现效果点击调用插件方法

vue图片动态src无法加载问题

使用require加载动态路径就可以正常显示图片了

require('动态img地址')