vue常用插件的使用

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转换成图片数据，最终可以上传到后台生成截图的在线地址，方便客户进行预览和下载分享。