记录vue使用的插件

vue插件

1.图片滑块验证：

"vue-monoplasty-slide-verify": "^1.1.3"

1.2使用示例：

<template>
  <div>
    <!-- //el-dialog element-ui中引入的组件  对话框
    //visible.sync属性了解于elmentui中对话框介绍 -->
      <el-dialog :visible.sync="outerVisible" width="90%">
        <slide-verify
          ref="slideblock"
          @again="onAgain"
          @fulfilled="onFulfilled"
          @success="onSuccess"
          @fail="onFail"
          @refresh="onRefresh"
          :slider-text="text"
          :accuracy="accuracy"
          :w="270"
          :imgs="imgs"
        ></slide-verify>
        <!-- <button @click="handleClick">在父组件可以点我刷新哦</button> -->
        <div v-bind:class="msgClass">{{ msg }}</div>
      </el-dialog>
    </div>
</template>

<script>
export default {
  name: 'slide',
  data() {
    return {
      msg: '',
      text: '向右滑动->',
      outerVisible: false,
      // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
      accuracy: 5,
      msgClass: '',
      imgs:[
        '/static/images/slide/1.jpg',
        '/static/images/slide/2.jpg',
        '/static/images/slide/3.jpg',
        '/static/images/slide/4.jpg',
        '/static/images/slide/5.jpg',
        '/static/images/slide/6.jpg',
        '/static/images/slide/7.jpg',
        '/static/images/slide/8.jpg',
        '/static/images/slide/9.jpg',
        '/static/images/slide/10.jpg',
        '/static/images/slide/11.jpg'
      ]
    }
  },
  methods: {
    onSuccess() {
      this.msg = '验证成功'
      this.msgClass = 'valSuccess'
      //滑动验证成功之后关闭弹出的窗口
      var that = this;
      setTimeout(function(){
        that.outerVisible = false
        that.$refs.slideblock.reset()
        that.msg = ''
        that.msgClass = ''
      },1000)
      this.$emit("fatherMethod",true);
    },
    onFail() {
      this.msg = '验证失败'
      this.msgClass = 'valFail'
      //this.$refs.slideblock.reset()
      this.$emit("fatherMethod",false);
    },
    onRefresh() {
      console.log('点击了刷新小图标')
      this.msg = ''
      this.msgClass = ''
    },
    onFulfilled() {
      this.msg = ''
      this.msgClass = ''
      console.log('刷新成功啦！')
    },
    onAgain() {
      this.msg = '检测到非人为操作的哦！'
      this.msgClass = 'valFail'
      // 刷新
      this.$refs.slideblock.reset()
    },
    handleClick() {
      this.$refs.slideblock.reset()
    },
  },
}
</script>

<style>
  .valSuccess{
      width: 270px;
      height: 30px;
      background-color: green;
      font-size: 16px;
      text-align: center;
      color: white;
      line-height: 30px;
  }
  .valFail{
      width: 270px;
      height: 30px;
      background-color: red;
      font-size: 16px;
      text-align: center;
      color: white;
      line-height: 30px;
  }
</style>

2.手写签名：

<template>
  <div class="signatureBox">
    <div class="canvasBox" ref="canvasHW">
      <!-- <div class="closeBox">
        <span>请签名</span>
        <p @click="close">X</p>
      </div> -->
      <canvas
        @touchstart="touchStart"
        @touchmove="touchMove"
        @touchend="touchEnd"
        ref="canvasF"
        @mousedown="mouseDown"
        @mousemove="mouseMove"
        @mouseup="mouseUp"
      ></canvas>
      <!-- <div class="btnBox">
        <button @click="surewrite">确认</button>
        <button @click="overwrite">重置</button>
      </div> -->
    </div>
  </div>
</template>

<script>
// import { Toast } from 'vant';
export default {
  name: "signature",
  data() {
    return {
      points: [],
      canvasTxt: null,
      startX: 0,
      startY: 0,
      moveY: 0,
      moveX: 0,
      endY: 0,
      endX: 0,
      w: null,
      h: null,
      isDown: false,
      color: "#000000",
      linewidth: 3,
      isDraw: false, //签名标记
      signResult:''
    };
  },
  created() {},
  mounted() {
    let canvas = this.$refs.canvasF;
    canvas.height = this.$refs.canvasHW.offsetHeight;
    canvas.width = this.$refs.canvasHW.offsetWidth;
    this.canvasTxt = canvas.getContext("2d");
    this.canvasTxt.strokeStyle = this.color;
    this.canvasTxt.lineWidth = this.linewidth;
  },
  components: {},
  methods: {
    //电脑设备事件
    mouseDown(ev) {
      ev = ev || event;
      ev.preventDefault();
      let obj = {
        x: ev.offsetX,
        y: ev.offsetY
      };
      this.startX = obj.x;
      this.startY = obj.y;
      this.canvasTxt.beginPath();
      this.points.push(obj);
      this.isDown = true;
    },
    //移动设备事件
    touchStart(ev) {
      ev = ev || event;
      ev.preventDefault();
      if (ev.touches.length == 1) {
        this.isDraw = true; //签名标记
        let obj = {
          x: ev.targetTouches[0].clientX,
          y: ev.targetTouches[0].clientY
            /* ev.targetTouches[0].clientY -
            (document.body.offsetHeight * 0.5 +
              this.$refs.canvasHW.offsetHeight * 0.1) */
        }; //y的计算值中：document.body.offsetHeight*0.5代表的是除了整个画板signatureBox剩余的高，this.$refs.canvasHW.offsetHeight*0.1是画板中标题的高
        this.startX = obj.x;
        this.startY = obj.y;
        this.canvasTxt.beginPath();
        this.points.push(obj);
      }
    },
    //电脑设备事件
    mouseMove(ev) {
      ev = ev || event;
      ev.preventDefault();
      if (this.isDown) {
        let obj = {
          x: ev.offsetX,
          y: ev.offsetY
        };
        this.moveY = obj.y;
        this.moveX = obj.x;
        this.canvasTxt.moveTo(this.startX, this.startY);
        this.canvasTxt.lineTo(obj.x, obj.y);
        this.canvasTxt.stroke();
        this.startY = obj.y;
        this.startX = obj.x;
        this.points.push(obj);
      }
    },
    //移动设备事件
    touchMove(ev) {
      ev = ev || event;
      ev.preventDefault();
      if (ev.touches.length == 1) {
        let obj = {
          x: ev.targetTouches[0].clientX,
          y: ev.targetTouches[0].clientY
            /* ev.targetTouches[0].clientY -
            (document.body.offsetHeight * 0.5 +
              this.$refs.canvasHW.offsetHeight * 0.1) */
        };
        this.moveY = obj.y;
        this.moveX = obj.x;
        this.canvasTxt.moveTo(this.startX, this.startY);
        this.canvasTxt.lineTo(obj.x, obj.y);
        this.canvasTxt.stroke();
        this.startY = obj.y;
        this.startX = obj.x;
        this.points.push(obj);
      }
    },
    //电脑设备事件
    mouseUp(ev) {
      ev = ev || event;
      ev.preventDefault();
      if (1) {
        let obj = {
          x: ev.offsetX,
          y: ev.offsetY
        };
        this.canvasTxt.closePath();
        this.points.push(obj);
        this.points.push({ x: -1, y: -1 });
        this.isDown = false;
      }
    },
    //移动设备事件
    touchEnd(ev) {
      ev = ev || event;
      ev.preventDefault();
      if (ev.touches.length == 1) {
        let obj = {
          x: ev.targetTouches[0].clientX,
          y: ev.targetTouches[0].clientY
           /* ev.targetTouches[0].clientY -
            (document.body.offsetHeight * 0.5 +
              this.$refs.canvasHW.offsetHeight * 0.1) */
        };
        // this.canvasTxt.beginPath();
        // this.canvasTxt.moveTo(this.startX, this.startY);
        // this.canvasTxt.lineTo(obj.x, obj.y);
        // this.canvasTxt.stroke();
        this.canvasTxt.closePath();
        this.points.push(obj);
        this.points.push({ x: -1, y: -1 });
      }
    },
    //重写
    overwrite() {
      this.canvasTxt.clearRect(
        0,
        0,
        this.$refs.canvasF.width,
        this.$refs.canvasF.height
      );
      this.points = [];
      this.isDraw = false; //签名标记
    },
    //关闭
    close() {
      this.canvasTxt.clearRect(
        0,
        0,
        this.$refs.canvasF.width,
        this.$refs.canvasF.height
      );
      this.points = [];
      this.$emit("close", false);
    },
    //确认签名
    surewrite() {
      var imgBase64 = this.$refs.canvasF.toDataURL();
      let base64ImgSrc = this.$refs.canvasF.toDataURL("image/png")
      //console.log("保存签名成功" + imgBase64);
      //console.log(this.isDraw);
      if (this.isDraw) {
        this.signResult = imgBase64;
        //console.log("保存签名成功" + this.signResult);
        //alert("签名成功！");
        // this.$emit("surewrite",false);
      } else {
        //alert("请签名后再确认！");
        this.signResult=""
      }
    }
  }
};
</script>

<style type="less" scoped>
.signatureBox {
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 100%;
 /* background: darkgray; */
  box-sizing: border-box;
  overflow: hidden;
  z-index: 100;
  /*display: flex;*/
  /*flex-direction: column;*/
}
.canvasBox {
  height: 100%;
}
/* canvas {
  border: 1px solid gray;
} */
.btnBox {
  height: 30px;
  padding: 5px;
  text-align: center;
  line-height: 30px;
}
.btnBox button {
  border: 1px solid dodgerblue;
  background: dodgerblue;
  color: #fff;
  border-radius: 4px;
  padding: 2px 30px;
  margin: 0 15px;
  font-size: 14px;
}
.closeBox {
  text-align: center;
  height: 10%;
}
.closeBox span {
  font-size: 15px;
  float: left;
}
.closeBox p {
  font-size: 22px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 30px;
  border: none;
  background: gray;
  color: white;
  float: right;
}
@media only screen and (min-width: 730px) {
  .signatureBox {
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 50%;
    background: darkgray;
    box-sizing: border-box;
    overflow: visible;
  }
}
</style>

3.vue展示pdf文件

"vue-pdf": "^4.2.0",

3.1使用

<template>
  <div class="empty">
    <pdf v-for="i in numPages" :key="i" :src="src" :page="i" style="width: 100%" > </pdf>
  </div>
</template>

<script>
  import pdf from 'vue-pdf'
  import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js' // 加载中文的包

  function  getname(name) {
      var  reg = new  RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var  href = window.location.hash;
      var r = href.substr(href.indexOf("?")+1).match(reg);
      if(r != null) return   unescape(encodeURIComponent(r[2]));
      return  null;
  }

/*
pdfUrl：不能使用本地的路径，需要放到static目录下面
##电子签章不显示是，使用下面的配置
步骤一 在node_modules/pdfjs-dist/build/pdf.worker.js注释掉一行代码
 if (data.fieldType === "Sig") {
       data.fieldValue = null;
       // 注释掉底下这行 就可以显示电子签章
       // this.setFlags(_util.AnnotationFlag.HIDDEN);
 }
 步骤二 在node_modules/pdfjs-dist/es5/build/pdf.worker.js注释掉一行代码
  if (data.fieldType === "Sig") {
     data.fieldValue = null;
       // 注释掉底下这行 就可以显示电子签章
       // _this3.setFlags(_util.AnnotationFlag.HIDDEN);
  }
*/
  export default {
    data() {
      return {
        picUrl:"",
        pdfUrl:'',
        numPages:1,
        src:''
      }
    },
    components:{
      pdf
    },
    mounted () {
      this.loadPdf();
   },
    created() {
      this.pdfUrl = "/static/pdf/"+decodeURIComponent(getname("pdfUrl"));
    },
    methods: {
      loadPdf:function(){
        this.src = pdf.createLoadingTask({url: this.pdfUrl, CMapReaderFactory})
        this.src.promise.then(pdf => {
            this.numPages = pdf.numPages // 这里拿到当前pdf总页数
        })
      }
    }
  }
</script>

<style>
.empty{
    overflow-y: scroll;
    height: 100%;
  }
</style>

4.vue滚动插件----vue-seamless-scroll

npm install vue-seamless-scroll --save

在main.js中引入：
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

组件使用
<vue-seamless-scroll :data="listData" class="seamless-warp" :class-option="option">
            <ul class="item">
                <li v-for="item in listData">
                    <span class="title" v-text="item"></span>
                </li>
            </ul>
</vue-seamless-scroll>


listData数据列表，为list数据， :class-option="option" option参数配置，加到computed中：
data() {
    return {
		listData:[]
	}
},
computed:{
    option() {
      return {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: this.carouselResult.length, //开始无缝滚动的数据量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)
      }
    },
  },