image.png
前端端知識日報是本坑新開的專題挖藏，記錄每天碰到的腦子里有點模糊的知識點膜眠。
圖片預(yù)加載實現(xiàn)溜嗜。
所謂預(yù)加載炸宵，就是在圖片加載完成之前焙压，不進(jìn)行img src的設(shè)置而是用默認(rèn)設(shè)置，直到圖片加載完成再替換src.也就是說野哭，圖片沒加載完成之前拨黔，不去渲染圖片绰沥。
function preLoad(){
let img = new Image();
img.src = url;
img.onload=function(){//圖片加載完成后立即執(zhí)行
this.src=img.src
}
}
如果是同時監(jiān)聽多個圖片呢？之前有個面試官問我如何實現(xiàn)多個圖片同時渲染零截，也是一樣的問題秃臣。
可以使用Promise.all
addPromise (url) {
return new Promise((reslove, reject) => {
let img = new Image();
img.src = url;
img.onload = () => {
reslove(url);
}
})
}
Promise.all(arr).then(reslove => {
for (let i = 0; i < reslove.length; i++) {
console.log('')
}
that.publishPrint(iframe, template)
})
}
a標(biāo)簽取消默認(rèn)
a{
text-decoration:none;
color:#333;
}
v-if和v-show的區(qū)別
v-if dom節(jié)點不渲染哪工，不存在雁比；v-show是display：none
打印實現(xiàn)
/**
*
* @description 打印方法
* @param {*} target 要打印的iframe
* @param {*} template 要打印的模板
*/
publishPrint (target, template) {
var doc = target.contentWindow.document;
doc.body.innerText = "";// 清空之前保存內(nèi)容
doc.write(template);//分頁打印
doc.close()
target.contentWindow.focus();
target.contentWindow.print();
}
使用樣式也可以達(dá)到分頁打印的效果撤嫩，比如使用下面幾個屬性：
page-break-before和page-break-after CSS屬性并不會修改網(wǎng)頁在屏幕上的顯示序攘，這兩個屬性是用來控制文件的打印方式。每個打印屬性都可以設(shè)定4種設(shè)定值：auto败京、always赡麦、left和right泛粹。
Auto：是默認(rèn)值肮疗，只有在有需要時伪货，才需設(shè)定分頁符號 (Page breaks)碱呼。
page-break-before若設(shè)定成always：則是在遇到特定的組件時蒙挑，打印機(jī)會重新開始一個新的打印頁忆蚀。
page-break-before若設(shè)定成left：則會插入分頁符號，直到指定的組件出現(xiàn)在一個左邊的空白頁上姑裂。
page-break-before若設(shè)定成right：則會插入分頁符號，直到指定的組件出現(xiàn)在一個右邊的空白頁上舶斧。
page-break-after屬性會將分頁符號加在指定組件后，而非之前茴厉。
.a {
page-break-before:always;
page-break-after:always;
}
打印事件還可以進(jìn)行監(jiān)聽
window.addEventListener('beforeprint', () => {
console.log('正在打印...')
});
window.addEventListener('beforeprint', () => {
console.log('完成打印...')
});
超出文字換行
換行屬性有如下三個：
white-space：規(guī)定如何處理空白观堂，是否換行，默認(rèn)值：normal（超出時自動換行）师痕；
word-wrap：normal （默認(rèn)，只在內(nèi)容的斷點換行而账，即不能斷開單詞）或 break-word（長單詞內(nèi)也可換行）胰坟；
word-break：normal（默認(rèn)，只在內(nèi)容的斷點換行）或 break-all （允許斷開單詞）泞辐、keep-all（只在半角或連字符處允許換行）。
關(guān)于省略號顯示咐吼，有這這么幾個屬性會遇到：
-webkit-line-clamp：用來限制在一個塊元素顯示的文本的行數(shù)。
display: -webkit-box： 將對象作為彈性伸縮盒子模型顯示厢塘。
-webkit-box-orient ：設(shè)置或檢索伸縮盒對象的子元素的排列方式 晚碾。
text-overflow : clip | ellipsis clip-不顯示省略標(biāo)記（...）格嘁，而是簡單的裁切.ellipsis-當(dāng)對象內(nèi)文本溢出時顯示省略標(biāo)記（...）
單行省略顯示:
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
多行后省略顯示,五個屬性缺一不可。box-orient在所有瀏覽器都不生效，但是加了webkit,webkit系列瀏覽器則有效懂诗，-moz則火狐瀏覽器有效。
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;//該屬性會將此元素及其直系子代加入彈性框模型中步氏。（Flexbox 模型只適用于直系子代）
-webkit-line-clamp:2;
-webkit-box-orient:vertical;//該屬性定義父元素的子元素是如何排列的响禽。
word-break: break-all;
