image.png
前端端知识日报是本坑新开的专题，记录每天碰到的脑子里有点模糊的知识点。
图片预加载实现。
所谓预加载，就是在图片加载完成之前，不进行img src的设置而是用默认设置，直到图片加载完成再替换src.也就是说，图片没加载完成之前，不去渲染图片。
function preLoad(){
let img = new Image();
img.src = url;
img.onload=function(){//图片加载完成后立即执行
this.src=img.src
}
}
如果是同时监听多个图片呢？之前有个面试官问我如何实现多个图片同时渲染，也是一样的问题。
可以使用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标签取消默认
a{
text-decoration:none;
color:#333;
}
v-if和v-show的区别
v-if dom节点不渲染，不存在；v-show是display：none
打印实现
/**
*
* @description 打印方法
* @param {*} target 要打印的iframe
* @param {*} template 要打印的模板
*/
publishPrint (target, template) {
var doc = target.contentWindow.document;
doc.body.innerText = "";// 清空之前保存内容
doc.write(template);//分页打印
doc.close()
target.contentWindow.focus();
target.contentWindow.print();
}
使用样式也可以达到分页打印的效果，比如使用下面几个属性：
page-break-before和page-break-after CSS属性并不会修改网页在屏幕上的显示，这两个属性是用来控制文件的打印方式。每个打印属性都可以设定4种设定值：auto、always、left和right。
Auto：是默认值，只有在有需要时，才需设定分页符号 (Page breaks)。
page-break-before若设定成always：则是在遇到特定的组件时，打印机会重新开始一个新的打印页。
page-break-before若设定成left：则会插入分页符号，直到指定的组件出现在一个左边的空白页上。
page-break-before若设定成right：则会插入分页符号，直到指定的组件出现在一个右边的空白页上。
page-break-after属性会将分页符号加在指定组件后，而非之前。
.a {
page-break-before:always;
page-break-after:always;
}
打印事件还可以进行监听
window.addEventListener('beforeprint', () => {
console.log('正在打印...')
});
window.addEventListener('beforeprint', () => {
console.log('完成打印...')
});
超出文字换行
换行属性有如下三个：
white-space：规定如何处理空白，是否换行，默认值：normal（超出时自动换行）；
word-wrap：normal （默认，只在内容的断点换行，即不能断开单词）或 break-word（长单词内也可换行）；
word-break：normal（默认，只在内容的断点换行）或 break-all （允许断开单词）、keep-all（只在半角或连字符处允许换行）。
关于省略号显示，有这这么几个属性会遇到：
-webkit-line-clamp：用来限制在一个块元素显示的文本的行数。
display: -webkit-box： 将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient ：设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow : clip | ellipsis clip-不显示省略标记（...），而是简单的裁切.ellipsis-当对象内文本溢出时显示省略标记（...）
单行省略显示:
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;
网友评论