写在前面
移动开发时代,前端同学刚刚送别了让人头秃的IE浏览器,却发现憧憬已久的移动互联网时代并不是想象中那般美好。各种棘手的系统兼容问题和浏览器兼容问题怎么也让人高兴不起来。作为一名工作不足3年的前端程序媛,始终相信好记性不如烂笔头。每次在项目开发过程中踩到的坑,都习惯性地记录了下来。昨日一瞥竟积少成多,稍感诧异。因此分享出来,希望对大家能有所帮助。
我的web前端学习交流群点击进入1045267283,欢迎加入!
样式问题
1、父元素设置了border-radius,子元素应用了transform,并且父元素设置了overflow:hidden,但是却失效?
// 给父元素设置
{
position:relative;
z-index:1;
}
2、设置input 文本框的 placeholder 的颜色
input::-webkit-input-placeholder{
color:rgba(144,147,153,1);
}
3、如何设置body背景色,height:100%,不生效?
同时设置html,body的高度
html,body{
height:100%;
}
或
body{
height: 100vh; // 代表占屏幕100%
}
4、一像素边框的问题
.row {
position: relative;
&:after{
content: "";
position: absolute;
left: 0;
top: 0;
width: 200%;
border-bottom:1px solid #e6e6e6;
color: red;
height: 200%;
-webkit-transform-origin: left top;
transform-origin: left top;
-webkit-transform: scale(0.5);
transform: scale(0.5);
pointer-events: none; /* 防止点击触发 */
box-sizing: border-box;
}
}
5、css属性touch-action:none;
该属性会导致安卓页面无法滚动,慎用!
6、去除ios 手机端input输入框的内阴影
input{
-webkit-appearance: none;
}
7、安卓手机端div里面在包一层div,文字展示不居中的问题。
最好给div设置padding ,不固定高度和不设置line-height;
是由于fixed定位引起的,改成absolute就解决了。
.box{
position: absolute;
}
9、div实现背景色和背景图片同时存在
{
background-color: #fff;
background-image:url('../../assets/img/model-bg.png');
background-repeat: no-repeat;
}
10、css 制作椭圆
border-radius可以单独设置水平和垂直的半径,只需要用一个斜杠(/)分隔这二个值就行。
此外我们还要知道border-radius不仅可以接受长度值还可以接受百分比值。
{
width: 150px;
height: 100px;
border-radius: 50%/50%; //简写属性:border-radius:50%
background: brown;
}
11、图片居中显示
object-fit: cover;
调试工具
1、Weinre远程调试工具
简单的步骤:
- 本地全局安装weinre , 命令行:npm install -g weinre
- 在本地启动一个检测器:weinre --boundHost 1.2.3.4 (IP为本地IP地址)
- 在浏览器访问此地址:http://1.2.3.4:8080
- 把下面这一串东西,放在你需要调试的页面里:
<script src="http://1.2.3.4:8080/target/target-script-min.js#anonymous"></script>
- 点击链接打开:http://1.2.3.4:8080/client/#anonymous
2、vconsole 日志打印
import VConsole from 'vconsole'
var vConsole = new VConsole();
3、fiddler抓包也需要支持https
解决方案:fiddler需要安装信任证书,手机也需要安装信任证书,在浏览器里面打开
http://1.2.3.4:8888 // 本地IP地址+端口号
4、charles 手机端抓包,需要安装证书
手机浏览器输入:chls.pro/ssl ,去下载证书。
手机-设置-安全与隐私-更多安全下载-从sd卡安装证书 - 找到之前在浏览器下载的证书
vue相关问题
1、vue 如何获取拉回数据后图片的高度?
<img
:src="userInfo.profilePicture"
alt
class="img-picture"
v-if="userInfo.profilePicture"
ref="myImg"
@load="imageFn"
>
imageFn() {
console.log(this.$refs.myImg.offsetHeight);
console.log(this.$refs.myImg.offsetWidth);
},
2、vue中同一个dom节点,v-if与v-for不推荐同时使用,官方解答:
不推荐同时使用 v-if 和 v-for。 当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级
3、vue v-for 中更改item 属性值后,v-show不生效的问题
添加this.$forceUpdate();进行强制渲染,效果实现。
因为数据层次太多,render函数没有自动更新,需手动强制刷新。
4、这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消
beforeRouteLeave(to, from, next) {
if (to.path === '/votes/subject') {
next('/task-list');
} else {
next();
}
}
5、element UI 自定义传参的解决方法
这里的handleSelect默认绑定的参数是选中的那条数据。如果一个页面有好几个相同的组件,要想知道选的是哪个?
<el-autocomplete
v-model="state4"
:fetch-suggestions="querySearchAsync"
placeholder="请输入内容"
@select="handleSelect"
></el-autocomplete>
解决方案:
<el-autocomplete
v-model="state4"
:fetch-suggestions="querySearchAsync"
placeholder="请输入内容"
@select="((item)=>{handleSelect(item, index)})"
// 写个闭包就可以了,index表示第几个组件
></el-autocomplete>
6、element-UI 框架 el-input 触发不了 @key.enter事件
<el-input v-model="form.loginName"
placeholder="账号"
@keyup.enter="doLogin">
</el-input>
解决方案:使用@key.center.native
<el-input v-model="form.loginName"
placeholder="账号"
@keyup.enter.native="doLogin">
</el-input>
最后分享个人经验
切记多去跟专业的人交流,有一句话就是听君--席话胜读十年书,确实是这样的。很多东西你自己去查,自己去想,顶不过专业的人的一句话。所以一定要多去跟专业的人交流学习。这是我个人建立的前端学习交流群点击进入1045267283群。有任何问题直接在里面问就行,多发言。里面也有比较新的资料还有各种学习前端的文章视频和书籍。