前端日常（项目里踩过的坑总结）

  • 使用某些五笔输入法无法输入问题 （非必现问题）

前提：antd4.X版本
是否在表单项Form.Item上使用了normalize属性

类似
image.png

删除，换种写法就行
  • 运行yarn报错
Error: incorrect data check at Zlib.zlibOnError [as onerror] (node:zlib:189:

Zlib包解压有问题，确认node版本是否为16.20.X 换个node版本就行；

  • 解决输入中文拼音时触发input事件的问题

可以利用HTML5的compositionstart和compositionend事件，当用户通过输入法开始组合文字时，会首先触发compositionstart事件，随后的输入将不会触发input事件。当用户完成汉字的选择并且输入法关闭时，会触发compositionend事件，此时的下一个input事件即代表了用户最终的输入内容。

import React, { useState } from 'react';

function PinyinInput() {
  const [value, setValue] = useState('');
  const [isComposing, setIsComposing] = useState(false);

  const handleComposition = (e) => {
    if (e.type === 'compositionend') {
      // 输入法组合结束
      setIsComposing(false);
      // 此时可以处理input事件 输入结束后必须触发一次事件
      handleInput(e);
    } else {
      // 输入法组合开始
      setIsComposing(true);
    }
  };

  const handleInput = (e) => {
    // 非中文拼音时直接走这里
    // 只有当不是在输入法组合过程中，才处理input事件
    if (!isComposing) {
      setValue(e.target.value);
    }
  };

  return (
    <input
      value={value}
      onCompositionStart={handleComposition}
      onCompositionEnd={handleComposition}
      onInput={handleInput}
    />
  );
}

export default PinyinInput;
  • 标点符号把文字带着换行的问题

    在css中加上line-break: anywhere;就好

  • textarea文本框自适应高度

给textarea加一个兄弟元素div，并把文本内容同时放入兄弟元素，通过兄弟元素撑开父元素高度，那么只要给textarea加上height:100%属性就行了，代码如下：

//vue项目
<temlate>
<div class="father">
  <div class="brother">{{content}}</div>
  <textarea class="textSelf" v-model="content"></textarea>
</div>
</template>
....
<style>
.father {
  position: relative;
  display: block;
  width: 100%;
  font-size:14px;
  line-height:16px;
  font-family:inherit;
   .brother,,textSelf{
     padding:10px 15px;
   }
  .brother {
    position: relative;
    z-index: -1;
    opacity: 0;
    display: block;
    width: 100%;
  }
  .textSelf {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    border:none;
    outline:none;
  }
}
</style>
  • 页面截屏保存图片

截屏工具：html2canvas

//具体使用
 import html2canvas from 'html2canvas';
//建议使用ES6的promise作处理
 html2canvas(document.getElementById('save_img')).then(function (canvas) {
//处理canvas转图片并作保存

                });

转图片与保存，一开始用手动封装的 base64Img2Blob与downloadFile，如下:

//转图片文件
function base64Img2Blob (code) {
  var parts = code.split(';base64,');
  var contentType = parts[0].split(':')[1];
  var raw = window.atob(parts[1]);
  var rawLength = raw.length;
  var uInt8Array = new Uint8Array(rawLength);
  for (var i = 0; i < rawLength; ++i) {
      uInt8Array[i] = raw.charCodeAt(i);
  }
  return new Blob([uInt8Array], {
      type: contentType
  });
}
//手动下载
 function downloadFile (fileName, content) {
  var aLink = document.createElement('a');
  var blob = base64Img2Blob(content); //new Blob([content]);
  aLink.download = fileName;
  aLink.href = URL.createObjectURL(blob);
  var event = document.createEvent('MouseEvents');
  console.log(event);
  event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  aLink.dispatchEvent(event);
}
//引用 downloadFile
...   
.then(function(canvas){
   downloadFile(Math.random() + '.png',canvas.toDataURL("image/png"));
})

电脑端调试没毛病，但是端上调试，显示未知文件，下载不了。
后续解决下载问题，使用FileSaver.js（github地址）这个插件：

canvas.toBlob(function (blob) {
     saveAs(blob,  Math.random + '.png');
});
  • 后台接口给的json字符串用JSON.parse转对象报错

原因：字符串内带转义字符\，在后台不愿意修改的情况下，前端使用了new Function进行转换
let json = (new Function("return " + string))();

  • IE8浏览器 Ajax跨域问题

项目中遇到的一个坑，ie8因为Ajax跨域限制无法下载文件，改为 window.open(url)也同样报错，最后改为window.location=url，才成功下载（需要搭配修改浏览器设置，internet选项=》安全=》自定义级别=》其他=》通过域访问数据源，设置为启用或者提示，hehe~）
算了，太麻烦，改了还不如不改，最终发现使用a标签href直接请求没有问题也无需修改浏览器配置。
如果为数据请求接口，可以参考参考链接1或者升级浏览器。
原因描述参考链接参考链接2

  • vue项目路由访问时页面空白：

检查配置的访问路由是否多了不该多的东西，比如空格...


生无可恋.jpg
  • tbody下除了换行外的多余空白：
代码

报错
  • 手机端输入框被软键盘遮挡问题：
//当鼠标获取焦点后反复执行
 function docmentScollResize() {
    setTimeout(function () {
        var inputTextBox = document.getElementById('input');
        inputTextBox.scrollIntoView(true);
    },100)
}
  • JavaScript中的Date对象在Safari与IOS中的“大坑”：

无法有效识别以“-”组成的日期字符串

即根据字符串获取日期时，例如var date = new Date("2016-05-31 08:00")，在Firefox、Chrome中正常运行，但是Safari就报错NaN。

解决方法是改成以“/”组成的日期字符串格式，如
var date = new Date("2016/05/31 08:00")

dateString.replace(/\-/g, "/");
  • vue项目中，post请求体，服务器解析中文乱码问题：

在axios的请求拦截器中设置contentType为application/x-www-form-urlencoded;并设置charset为UTF_8；

axios.interceptors.request.use( config => {
   if(config.method = "post") {
       config.headers = Object.assign(config.headers || {}, 
{"Content-Type": "application/x-www-form-urlencoded;charset=UTF_8"})
    }
})

参考链接:
get/post请求中文乱码问题及最佳解决方案
vue--axios请求头设置传输编码格式+

  • 在vue项目中使用canvas，报错：【TypeError: Cannot read property 'getContext' of null"】，

原因：是在html加载之前就运行了js，即vue的生命周期函数必须为beforeMount之后才能获取canvas元素。

  • 解决移动端底部点击弹框后，页面滑动至顶部问题，解决手机端弹框后底部页面滑动问题：

1、参考：解决移动端弹框后底部页面可滑动问题，解决手机端弹框后底部页面滑动问题

2、弹框后直接滑倒顶部问题：直接在父级添加属性over-flow:auto;
（朋友实践经验=.=，仅供参考）

  • 微信小程序的input输入框设置

input不设置type属性，输入emoji表情后，e.detail.value = undefined；

设置（type="text"）后，输入emoji表情第一次读取正常，无修改的二次读取会报undefined，建议第一次读取时将值保存，避免二次读取
（第一次开发小程序遇到的坑，仅供参考）

  • electron-vue项目初始化报错，ReferenceError: process is not defined（参考链接）

在.electron-vue/webpack.web.config.js和 .electron-vue/webpack.renderer.config.js 里修改 HtmlWebpackPlugin :

...
new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, '../src/index.ejs'),
      templateParameters(compilation, assets, options) {
        return {
          compilation: compilation,
          webpack: compilation.getStats().toJson(),
          webpackConfig: compilation.options,
          htmlWebpackPlugin: {
            files: assets,
            options: options
          },
          process,
        };
      },
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true
      },
      nodeModules: false
    }),
...
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 199,636评论 5赞 468
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 83,890评论 2赞 376
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 146,680评论 0赞 330
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 53,766评论 1赞 271
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,665评论 5赞 359
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,045评论 1赞 276
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,515评论 3赞 390
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,182评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,334评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,274评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,319评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,002评论 3赞 315
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,599评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,675评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,917评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,309评论 2赞 345
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 41,885评论 2赞 341