前端知识日报--(打印、预加载、文字省略号)

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;