vue常用插件的使用
1. vue-seamless-scroll
使用步骤
1、安装vue-seamless-scroll
npm install vue-seamless-scroll --save
2、引入组件
<vue-seamless-scroll></vue-seamless-scroll>
import vueSeamlessScroll from 'vue-seamless-scroll'
components: {
vueSeamlessScroll
},
<template>
<vue-seamless-scroll :data="listData" class="seamless-warp" :class-option="defaultOption">
<ul class="item">
<li v-for="item in listData">
<span class="title" v-text="item.title"></span><span class="date" v-text="item.date"></span>
</li>
</ul>
</vue-seamless-scroll>
</template>
<style lang="scss" scoped>
.seamless-warp {
height: 229px;
overflow: hidden;
}
</style>
<script>
export default {
data () {
return {
listData: [{
'title': '无缝滚动第一行无缝滚动第一行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第二行无缝滚动第二行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第三行无缝滚动第三行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第四行无缝滚动第四行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第五行无缝滚动第五行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第六行无缝滚动第六行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第七行无缝滚动第七行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第八行无缝滚动第八行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第九行无缝滚动第九行',
'date': '2017-12-16'
}]
}
}
// 监听属性 类似于data概念,(可选配置,因为大多配置都有默认值)
computed: {
defaultOption () {
return {
step: 0.2, // 数值越大速度滚动越快
limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
}
}
},
}
</script>
2. PDF.js是什么
PDF.js是一个JavaScript库,可以在现代Web浏览器中渲染和显示PDF文件。它的主要作用是将PDF文件转换为HTML5格式,以便在浏览器上进行展示和交互。
PDF.js的主要功能包括:
在浏览器中显示PDF:PDF.js使用HTML5的canvas元素来呈现PDF页面,使得用户可以在浏览器中直接查看PDF文件,而无需依赖外部的PDF阅读器插件。
支持基本的浏览功能:PDF.js提供了一套用户界面,包括缩放、滚动、翻页等浏览功能,使用户能够方便地导航和浏览PDF文件。
支持文本搜索:PDF.js可以对PDF文件进行文本搜索,用户可以输入关键字来查找并定位到相应的内容。
支持页面导航:PDF.js提供了页面导航功能,用户可以跳转到特定的页面,或者在查看多页PDF时进行翻页。
支持缩放和旋转:PDF.js允许用户调整PDF页面的缩放级别,并可以旋转页面以适应不同的阅读需求。
支持批注和标记:PDF.js可以让用户在PDF文件中进行批注和标记,例如划线、画框、添加注释等,以便在阅读或共享时进行交流和标记重点。
总的来说,PDF.js提供了一种在Web浏览器中展示和操作PDF文件的解决方案,使用户能够直接在浏览器中浏览和使用PDF,而无需依赖外部的PDF阅读器插件或专门的PDF编辑工具。
3. Print.js
如果你直接想从这些网站下载这些 PDF 文件,你可以单击一个按钮并执行此操作。但是,可能会出现一些情况,例如用户只想打印这些文件而不是下载它们。
为此,你首先必须下载 PDF 文件,打开它们,然后打印它们。
但是,如果用户点击按钮后可以直接进入打印屏幕怎么办?这将是一种更好的方法,而不是告诉用户下载文件,打开它,然后打印该文件。
这个过程可以在 JavaScript 中通过使用 iframe 标签或第三方 JavaScript 库(如 Print.js)来实现。
window.print 可以直接打印页面,缺点是需要来回在html.body.innerHtml 里替换,容易照成页面闪动 所有优化是使用iframe打印页面或者是pdf,还可以使用pdfjs打印页面
3.html2canvas
正如 html2canvas 的名字所提示的一样,其实现截图的原理实际是将DOM对象进行迭代克隆和解析,按照层叠关系自顶向下逐步绘制到 canvas 对象里,然后利用 canvas 的底层 API toDataURL和 toBlob转换成图片数据,最终可以上传到后台生成截图的在线地址,方便客户进行预览和下载分享。
html-webpack-plugin / vite-plugin-html
项目中需要使用模板html动态处理比如 icon 、title。我的项目里是需要在不同的打包指令下,打包的结果中index.html 中title 和 icon都不一致。之前的项目使用的是 html-webpack-plugin 插件。安装该插件的使用需要注意你项目的webpack版本,安装对应的版本插件。本次因为项目是vite项目,所以采用vite-plugin-html插件。