-
标点符号把文字带着换行的问题
在css中加上line-break: anywhere;就好
-
textarea文本框自适应高度
给textarea加一个兄弟元素div，并把文本内容同时放入兄弟元素，通过兄弟元素撑开父元素高度，那么只要给textarea加上height:100%属性就行了，代码如下：
//vue项目
{{content}}
....
-
页面截屏保存图片
截屏工具：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项目路由访问时页面空白：
检查配置的访问路由是否多了不该多的东西，比如空格...
-
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
}),
...