vue-print-nb使用

 下载

pnpm add vue-print-nb --save

全局注册，使用插件的注册方式

或

局部注册自定义指令

import print from 'vue-print-nb'
directives: {print
}

绑定到点击按钮上

 Print!

 设置配置项-常用 id和popTitle

 content: {id: 'printId', // 绑定打印区域的IDpopTitle: '顶部页眉中的标题',standard: 'html5', // 默认打印文档类型，为html5（支持html5,loose,strict）endCallback: () => { // 打印后的回调函数console.log('打印')}

在自己封装的弹窗中使用

 做了定制化处理-图片百分比设置，弹窗高度设置固定，超出出现滚动条，以及进行图片懒加载，打印只打印主体部分

--------------------------------------------------------------------

加入懒加载代码

之前封装的组件拿出来用

点击显示弹窗-并拿到图片DOM

 doShow () {this.flag = true// 等待dom更新完毕拿到dom---this.$nextTick(() => {// console.log(document.querySelectorAll('.imgs'))//$ref和dqs都可以都可以拿到DOM// console.log(document.querySelector('#box').parentNode, '111')// 调用函数，传入所有图片DOM和视口this.fn(this.$refs.imgs, document.querySelector('#box').parentNode)})}

调用懒加载---options设置视口-设置监听交叉比例值

fn (imgs, parentView) {console.dir(parentView)const options = {root: parentView, // 指定可视区元素threshold: 1 // 规定了一个监听目标与边界盒交叉区域的比例值，可以是一个具体的数值或是一组0.0到1.0之间的数组。若指定值为0.0，则意味着监听元素即使与根有1像素交叉，此元素也会被视为可见. 若指定值为1.0，则意味着整个元素都交叉时视为可见。阈值的默认值为0.0}function callback (entery, ob) {// console.log(entery)// console.log(ob, '1111')entery.forEach((item) => {// console.log(item)if (item.intersectionRatio) {console.log(item)item.target.src = item.target.dataset.srcIO.unobserve(item.target)}})}// console.log(imgs)// IntersectionObserver(this.fn, {})const IO = new IntersectionObserver(callback, options)// console.log(IO)imgs.forEach(imgsDom => {IO.observe(imgsDom)})},

options 配置 IntersectionObserver，他包含以下几项配置

root: 监听元素的祖先元素Element对象，其边界盒将被视作视口。目标在根的可见区域的的任何不可见部分都会被视为不可见。默认情况下文档视口会作为root

rootMargin: 一个在计算交叉值时添加至根的边界盒(bounding_box)中的一组偏移量，类型为字符串(string) ，可以有效的缩小或扩大根的判定范围从而满足计算需要。语法大致和CSS 中的margin 属性等同。默认值是"0px 0px 0px 0px"。

threshold: 规定了一个监听目标与边界盒交叉区域的比例值，可以是一个具体的数值或是一组0.0到1.0之间的数组。若指定值为0.0，则意味着监听元素即使与根有1像素交叉，此元素也会被视为可见. 若指定值为1.0，则意味着整个元素都交叉时视为可见。阈值的默认值为0.0。

封装组件做了调整padding改为设置margin值

img使用div包裹，防止一行，下拉加载了所有

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！