-
使用某些五筆輸入法無法輸入問題 （非必現(xiàn)問題）
前提：antd4.X版本
是否在表單項Form.Item上使用了normalize屬性
刪除力麸，換種寫法就行
-
運行yarn報錯
Error: incorrect data check at Zlib.zlibOnError [as onerror] (node:zlib:189:
Zlib包解壓有問題娶靡，確認(rèn)node版本是否為16.20.X 換個node版本就行荧库；
-
解決輸入中文拼音時觸發(fā)input事件的問題
可以利用HTML5的compositionstart和compositionend事件，當(dāng)用戶通過輸入法開始組合文字時坞笙，會首先觸發(fā)compositionstart事件窑多，隨后的輸入將不會觸發(fā)input事件烟央。當(dāng)用戶完成漢字的選擇并且輸入法關(guān)閉時，會觸發(fā)compositionend事件瞒渠，此時的下一個input事件即代表了用戶最終的輸入內(nèi)容良蒸。
import React, { useState } from 'react';
function PinyinInput() {
const [value, setValue] = useState('');
const [isComposing, setIsComposing] = useState(false);
const handleComposition = (e) => {
if (e.type === 'compositionend') {
// 輸入法組合結(jié)束
setIsComposing(false);
// 此時可以處理input事件 輸入結(jié)束后必須觸發(fā)一次事件
handleInput(e);
} else {
// 輸入法組合開始
setIsComposing(true);
}
};
const handleInput = (e) => {
// 非中文拼音時直接走這里
// 只有當(dāng)不是在輸入法組合過程中，才處理input事件
if (!isComposing) {
setValue(e.target.value);
}
};
return (
<input
value={value}
onCompositionStart={handleComposition}
onCompositionEnd={handleComposition}
onInput={handleInput}
/>
);
}
export default PinyinInput;
-
標(biāo)點符號把文字帶著換行的問題
在css中加上
line-break: anywhere;就好 -
textarea文本框自適應(yīng)高度
給textarea加一個兄弟元素div伍玖，并把文本內(nèi)容同時放入兄弟元素嫩痰，通過兄弟元素撐開父元素高度，那么只要給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轉(zhuǎn)圖片并作保存
});
轉(zhuǎn)圖片與保存串纺，一開始用手動封裝的 base64Img2Blob與downloadFile，如下:
//轉(zhuǎn)圖片文件
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"));
})
電腦端調(diào)試沒毛病椰棘，但是端上調(diào)試纺棺，顯示未知文件，下載不了邪狞。
后續(xù)解決下載問題五辽，使用FileSaver.js（github地址）這個插件：
canvas.toBlob(function (blob) {
saveAs(blob, Math.random + '.png');
});
-
后臺接口給的json字符串用JSON.parse轉(zhuǎn)對象報錯
原因：字符串內(nèi)帶轉(zhuǎn)義字符\，在后臺不愿意修改的情況下外恕，前端使用了new Function進行轉(zhuǎn)換
let json = (new Function("return " + string))();
-
IE8瀏覽器 Ajax跨域問題
項目中遇到的一個坑杆逗，ie8因為Ajax跨域限制無法下載文件乡翅，改為 window.open(url)也同樣報錯，最后改為window.location=url罪郊，才成功下載（需要搭配修改瀏覽器設(shè)置蠕蚜，internet選項=》安全=》自定義級別=》其他=》通過域訪問數(shù)據(jù)源，設(shè)置為啟用或者提示悔橄，hehe~）
算了靶累，太麻煩，改了還不如不改癣疟，最終發(fā)現(xiàn)使用a標(biāo)簽href直接請求沒有問題也無需修改瀏覽器配置挣柬。
如果為數(shù)據(jù)請求接口，可以參考參考鏈接1或者升級瀏覽器睛挚。
原因描述參考鏈接參考鏈接2
-
vue項目路由訪問時頁面空白：
檢查配置的訪問路由是否多了不該多的東西邪蛔，比如空格...
-
tbody下除了換行外的多余空白：
-
手機端輸入框被軟鍵盤遮擋問題：
//當(dāng)鼠標(biāo)獲取焦點后反復(fù)執(zhí)行
function docmentScollResize() {
setTimeout(function () {
var inputTextBox = document.getElementById('input');
inputTextBox.scrollIntoView(true);
},100)
}
-
JavaScript中的Date對象在Safari與IOS中的“大坑”：
無法有效識別以“-”組成的日期字符串
即根據(jù)字符串獲取日期時，例如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請求體污抬，服務(wù)器解析中文亂碼問題：
在axios的請求攔截器中設(shè)置contentType為application/x-www-form-urlencoded;并設(shè)置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請求頭設(shè)置傳輸編碼格式+
-
在vue項目中使用canvas，報錯：【TypeError: Cannot read property 'getContext' of null"】印机，
原因：是在html加載之前就運行了js矢腻，即vue的生命周期函數(shù)必須為beforeMount之后才能獲取canvas元素。
-
解決移動端底部點擊彈框后耳贬，頁面滑動至頂部問題踏堡，解決手機端彈框后底部頁面滑動問題：
2顷蟆、彈框后直接滑倒頂部問題：直接在父級添加屬性over-flow:auto;
（朋友實踐經(jīng)驗=.=，僅供參考）
-
微信小程序的input輸入框設(shè)置
input不設(shè)置type屬性腐魂，輸入emoji表情后帐偎，e.detail.value = undefined；
設(shè)置（type="text"）后蛔屹，輸入emoji表情第一次讀取正常削樊，無修改的二次讀取會報undefined，建議第一次讀取時將值保存，避免二次讀取
（第一次開發(fā)小程序遇到的坑漫贞，僅供參考）
-
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
}),
...
