本文旨在整理和记录 2019年度 从事前端工作的过程中遇到的问题以及解决问题的思路。内容偏新手且叙述不深,整理的目的是为了方便以后快速查阅之前遇到过的问题。
Vue或者React框架使用过程中的笔记
改变父组件标签上属性绑定值的方式
- 方式一 普遍做法,通过在标签上绑定一个事件,在子组件上调用$emit触发该事件进而改变属性值
- 方式二 借助.sync修饰符 这种方式无需再绑定事件
- 父组件
:msg.sync = "msg"
- 子组件
this.$emit(‘update:msg‘, ‘传递的值‘)
- 不能接受表达式和字面量对象
v-model 几个实用的修饰符
- lazy 将双向绑定的input事件变成change事件
- trim 自动过滤首位空白字符
- number 将输入值转为数值类型
插槽用法
动态的绑定标签特性
<a v-bind:[dataAttr]="url"></a>
...
data: {
dataAttr: ‘href‘
}
问题描述 |
解决方法 |
本地图片无法正常显示 |
使用 require(‘本地图片路径‘) |
打包后的html页面显示空白 |
找到文件 config/index.js 修改 build 配置下的 assetsPublicPath 为相对路径 ‘./‘ |
清除浏览器默认样式 |
在项目引入 reset.css |
vue中绑定键盘事件 |
@keydown.enter 注意绑到按钮上无效 |
改变状态值页面无响应,页面需下一帧才能得到变化 |
setTimeout(()=>{...}, 0) vue中还可以使用 this.$nextTick(()=>{...}) |
路由使用history模式无效 |
这种模式需要在服务端有响应的配置 用hash模式可在前端使用路由 |
ES6常用语法
Promise的基本用法
var p = new Promise((resolve, reject) => {
//new 后立即执行的操作
resolve() //异步执行成功后要进行的操作,在then中进行
reject()//异步执行失败后要进行的操作,在catch中进行
})
p.then().catch().finally()
Promise.all([p1, p2, p3]).then().catch() //全部拿到结果后再执行
Promise.race([p1, p2, p3]).then().catch() //有一个拿到结果就执行
export 与 export default
语法格式 |
简单描述 |
Array.includes() |
检测数组中是否包含指定项,返回布尔值 |
()=>{} |
箭头函数,注意它没有自己的作用域 |
`xxx${var}` |
模版字符串 |
new Set(array) ==> 使用[...array] |
数组快速去重 |
Array.from(new Set(array)) |
将Set变成普通数组 |
Object.keys().length |
判断对象是否为空 |
js技巧
对象拷贝
- 深拷贝
- JSON.parse(JSON.stringify(obj)) 对象包含可序列化值并且没有循环引用时有效
- 浅拷贝
- {...obj}
- Object.assign({}, obj) 拷贝的仅为对象的指针
对URI编码和解码
- encodeURI()、decodeURI()
- encodeURIComponent()、decodeURIComponent() 可对特殊字符如#,/,¥等起作用
- 注意当使用浏览器地址传参数时(如路由跳转时),如果参数中有中文,需要使用 encodeURIComponent() 编码,因为浏览器url会自动解码一次所以需要编码两次才能生效:
encodeURIComponent(encodeURIComponent(url))
toFixed 出现无限循环小数
Math.floor(xx * 100) / 100
xx.toString().match(/^\d+(?:\.\d{0, 2})?/)[0]
CSS技巧
flex流布局
选择器优先级
文本内容超出容器显示省略号
- 单行文本
#content{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
- 多行文本(背景颜色设为transparent)
#content{
position: relative;
overflow: hidden;
}
#content::after{
content: ‘...‘;
position: absolute;
bottom: 0;
right: 0;
}
消除img标签中的图片为空时的边框
img[src=""], img:not([src]){
opacity: 0;
}
制作一个表头固定 表体滚动的表格(需设置高、宽)
- thead, tr 设置
display: table; table-layout: fixed;
- tbody 设置
display: block; overflow-y: scroll;
子元素设置浮动后父元素设置 height: auto 无效
.parent::after{
content: "";
display: table;
clear: both;
}
BFC(块格式化上下文)
- 参考这篇文章 什么是BFC?看这一篇就够了
- 上面这个例子(子元素设置浮动后父元素设置 height: auto 无效)就是创造了BFC
- 如何创建BFC
- float的值不是none
- position的值不是static或者relative
- display的值是inline-block、table-cell、flex、table-caption或者inline-flex
- overflow的值不是visible
设置图片宽高为相对百分比的情况下让宽高相等
.parent{
position: relative;
height: 0;
padding-bottom: 100%;
}
.child{
width: 100%;
height: 100%;
position: absolute;
}
设置图片的填充方式和位置
object-fit: fill/cover.contain/scale-down
参考
object-position: 值或者方向词
参考
在less/scss中使用calc()无效
//less中加上~转译符号
height: calc(~"100vh-200px")
//scss中使用插值#{}
height: calc(100% - #{$var})
样式格式 |
简单描述 |
text-decoration: line-through |
定义穿过文本的一条线 |
text-align-last: justify |
让文字两端对齐 |
resize: none |
禁止textarea拉伸 |
font-size: 0 |
让 input 的 cursor: pointer 样式生效 |
touch-action: none |
禁用浏览器触摸交互 |
pointer-events: none |
让元素永远不能成为鼠标事件的target |
常用库问题集锦
ElementUI
问题描述 |
解决方法 |
图标无法正常显示 |
在 build/utils.js 文件中的 ExtractTextPlugin 插件中加入 publicPath: ‘../../‘ |
AntDesign
问题描述 |
解决方法 |
日期选择框中的年月日是英文 |
import {ConfigProvider} from ‘antd‘ => import ‘moment/locale/zh-cn => import zhCN from ‘antd/es/locale/zh_CN‘ => <ConfigProvider locale={zhCN}>...</ConfigProvider> |
Table组件中含有表单控件时无法正常使用状态state |
Table的column属性不要定义在状态中,直接用const接收 |
Echarts
问题描述 |
解决方法 |
使用内置的百度地图不显示 |
需要引入 import ‘echarts/extension/bmap/bmap‘ |
Axios
qs.stringify({ids: [1, 2, 3]}, { indices: false })
//形式: ids=1&ids=2&id=3
qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘indices‘})
//形式: ids[0]=1&aids1]=2&ids[2]=3
qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘brackets‘})
//形式:ids[]=1&ids[]=2&ids[]=3
qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘repeat‘})
//形式: ids=1&ids=2&id=3
import axios from ‘axios‘
import qs from ‘qs‘
import {message} from ‘antd‘
axios.defaults.baseURL = ‘http://XXX/‘
axios.defaults.withCredentials = true //设置为true 可以让请求带上cookie中的值,用于获取登录状态的SESSION
axios.interceptors.request.use(function (config) {
// 判断请求的类型
// 如果是post请求就把默认参数拼到data里面
// 如果是get请求就拼到params里面
if (config.method === ‘post‘ || config.method === ‘put‘) {
let data = qs.parse(config.data)
config.params = {
...config.params
}
config.data = qs.stringify({
...data
}, {
arrayFormat: ‘brackets‘
})
}
return config
}, function (error) {
return Promise.reject(error)
})
axios.interceptors.response.use((res) => {
//对响应数据做些事
// if (res.config.method === ‘get‘) {
// return res
// }
if (res.data.code === ‘0000‘) {
// if (res.config.method === ‘post‘) {
return res.data.data
// }
} else if (res.data.statusCode === 304) {
window.location.href = ‘/#/login‘
} else {
return Promise.reject(res.data.message)
}
}, (error) => {
return Promise.reject(‘请求异常‘)
})
function request(params){
return new Promise((resolve, reject) => {
axios({
url: params.url || ‘‘,
method: params.method || ‘post‘,
params: params.params || {},
data: params.data || {},
headers: {
‘Content-Type‘: params.contentType || ‘application/x-www-form-urlencoded‘
},
paramsSerializer: function (param) {
return qs.stringify(param, {
arrayFormat: ‘repeat‘
})
},
}).then(res => {
resolve(res)
}).catch(err => {
console.log(err)
message.error(err || ‘出问题‘)
reject(err)
})
})
}
export default request
操作DOM
- DOM.getBoundingClientRect().bottom 获取DOM元素相对于可视页面底部的距离
- 注意:元素的 offsetTop、offsetLeft 的值是根据css定位来的,默认是相对 body,出现 relative 会改变这种行为,利用 offsetParent 可查看父元素
- DOMid.scrollTop = DOMid.scrollHeight 可以让元素滚动到最底部
- 一个高度自适应内容且高度有最大值的的textarea
<textarea rows="1" className="input-msg" value={currentContent} type="text" onChange={(e) => setCurrentContent(e.target.value)} onInput={autoTextAreaHeight} onBlur={handleBlur}></textarea>
const autoTextAreaHeight = (e) => {
if (e.target.scrollHeight <= 90) {
e.target.style.height = ‘auto‘
e.target.style.height = e.target.scrollHeight + "px"
}
}
const handleBlur = () => {
//解决IOS失焦事件先于click事件导致click事件无效
setTimeout(() => {
window.scroll(0, 0)
}, 0)
}
//css
// resize: none;
web端与移动端的兼容性
问题描述 |
解决方法 |
IOS/Safari XXXX-XX-XX 日期无效 |
不支持这种 - 的格式,利用正则替换日期字符串 replace(/\-/g, "/") |
火狐浏览器在文件域中无法发起ajax请求请求json文件 |
首先在浏览器地址栏中输入 about:config 然后找到 security.fileuri.strict_origin_policy 置为 false |
IOS/Safari 使用 transform 时,z-index 无效 |
需要在祖先元素上加上 overflow: hidden; |
浏览器默认字体不一样导致空格显示的长度不一样 |
设置样式 font-family: Times New Roman |
IE 报错 Promise 未定义 |
安装 babel-polyfill 然后在 main.js 中引入 |
手机上H5的网络图片不显示 403 Forbidden |
在入口页面加上<meta name="referrer" content="no-referrer" /> |
其他
- localStorage 只能存储字符串,存储数组对象需要用JSON转换
- momentJS 配置成中文
moment.locale(‘zh-cn‘, xxx)
xxx是中文配置
[‘a‘]==‘a‘ 为true
typeof([]) = ‘object‘
- 跳过ESlint检测
/*eslint-disable*/
...
/*eslint-enable*/
结束语
暂时就这么点了,有什么遗漏的以后再补充。
原文地址:https://www.cnblogs.com/eightFlying/p/2019note.html
时间: 2024-11-08 20:12:49