移动开发时代,前端同学刚刚送别了让人头秃的IE浏览器,却发现憧憬已久的移动互联网时代并不是想象中那般美好。各种棘手的系统兼容问题和浏览器兼容问题怎么也让人高兴不起来。作为一名工作不足3年的前端程序媛,始终相信好记性不如烂笔头。每次在项目开发过程中踩到的坑,都习惯性地记录了下来。昨日一瞥竟积少成多,稍感诧异。因此分享出来,希望对大家能有所帮助。
// 给父元素设置 { position:relative; z-index:1; } 复制代码
input::-webkit-input-placeholder{ color:rgba(144,147,153,1); } 复制代码
同时设置html,body的高度 html,body{ height:100%; } 或 body{ height: 100vh; // 代表占屏幕100% } 复制代码
.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; } } 复制代码
该属性会导致安卓页面无法滚动,慎用! 复制代码
input{ -webkit-appearance: none; } 复制代码
最好给div设置padding ,不固定高度和不设置line-height; 复制代码
是由于fixed定位引起的,改成absolute就解决了。
.box{ position: absolute; } 复制代码
{ background-color: #fff; background-image:url('../../assets/img/model-bg.png'); background-repeat: no-repeat; } 复制代码
border-radius可以单独设置水平和垂直的半径,只需要用一个斜杠(/)分隔这二个值就行。
此外我们还要知道border-radius不仅可以接受长度值还可以接受百分比值。
{ width: 150px; height: 100px; border-radius: 50%/50%; //简写属性:border-radius:50% background: brown; } 复制代码
object-fit: cover; 复制代码
@font-face { font-family: "djicon"; src: url('./iconfont.eot'); /* IE9*/ src: url('./iconfont.svg#iconfont') format('svg'), /* iOS 4.1- */ url('./iconfont.woff') format('woff'), /* chrome、firefox */ url('./iconfont.ttf') format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ } // 参考文档:https://www.cnblogs.com/Megasu/p/4305116.html 复制代码
node - cheerio模块,操作dom字符串比较方便,实际案例:
解决了 PC端图片在移动端展示的问题参考文档:
www.jianshu.com/p/e6d73d8fa…
www.npmjs.com/package/che…
width: number = 784 代表pc端宽度 regHtml(str: string){ // 参数是html片段 let _this = this; const $ = cheerio.load(str); $('img').each(function(index,element){ let attr = element.attribs //元素的属性 // 屏幕宽度 let docEl = document.documentElement let clientWidth = docEl.clientWidth if(attr.width){ //如果设置了宽 // 图片宽度/屏幕宽度的比例 let rate = attr.width /_this.width //图片的宽高比例 let wh = attr.width/attr.height $(element).attr('height', _this.rate*clientWidth/wh) $(element).attr('width', _this.rate*clientWidth) $(element).attr('style', '') $(element).attr('class', 'img-skew') } }) return $.html() } 复制代码
ios系统中点击Input输入框,没有反应,无法聚集光标,调不起键盘。
解决方案:强制性给加上点击事件,点击后给input框聚集光标。
cilckTextarea(){ document.getElementsByClassName('cont-inp')[0].focus(); }, 复制代码
解决方案:手动添加图片name
let data = new FormData(); data.append("fileName", file[0],file[0].name); 复制代码
解决方案:手动把滚动条滚到底部写一个自定义指令。
import Vue from 'vue'; Vue.directive('blur', { 'bind'(el) { el.addEventListener("click", function(){ window.scrollTo(0,0); }) } }); //在点击页面提交按钮的时候,把滚动条滚到底部就OK了 复制代码
解决方案:阻止页面字体自动调整大小
// 安卓: (function() { if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") { handleFontSize(); } else { if (document.addEventListener) { document.addEventListener("WeixinJSBridgeReady", handleFontSize, false); } else if (document.attachEvent) { //IE浏览器,非W3C规范 document.attachEvent("onWeixinJSBridgeReady", handleFontSize); } } function handleFontSize() { // 设置网页字体为默认大小 WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 }); // 重写设置网页字体大小的事件 WeixinJSBridge.on('menu:setfont', function() { WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 }); }); } })(); //iOS: // ios使用-webkit-text-size-adjust禁止调整字体大小 body{-webkit-text-size-adjust: 100%!important;} 复制代码
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> 复制代码
<input type="text" autocapitalize="none"> 复制代码
<meta name="format-detection" content="telephone=no" /> 复制代码
-webkit-user-select: none; 复制代码
只需要对不触发click事件的元素添加一行css代码即可:
cursor: pointer; 复制代码
简单的步骤:
- 本地全局安装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 复制代码
import VConsole from 'vconsole' var vConsole = new VConsole(); 复制代码
解决方案:fiddler需要安装信任证书,手机也需要安装信任证书,在浏览器里面打开
http://1.2.3.4:8888 // 本地IP地址+端口号 复制代码
手机浏览器输入:chls.pro/ssl ,去下载证书。 手机-设置-安全与隐私-更多安全下载-从sd卡安装证书 - 找到之前在浏览器下载的证书 复制代码
<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); }, 复制代码
不推荐同时使用 v-if 和 v-for。 当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级
添加this.$forceUpdate();进行强制渲染,效果实现。 因为数据层次太多,render函数没有自动更新,需手动强制刷新。 复制代码
beforeRouteLeave(to, from, next) { if (to.path === '/votes/subject') { next('/task-list'); } else { next(); } } 复制代码
这里的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> 复制代码
<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> 复制代码
以上就是前端小姐姐这两年小本本上总结的所有东西了,当然相信咱们的前端道友们都是见过大风大浪的,欢迎在评论区交流,分享自己的宝贵经验!o( ̄︶ ̄)o