vue-monoplasty-slide-verify在H5页面的使用和参数说明

首先的前提是项目是使用rem单位的，基数是40，装有vant组件

先用npm安装 vue-monoplasty-slide-verify

npm install  vue-monoplasty-slide-verify --save

然后在main.js中引入，在页面按需引入的话会报错且使用不了

import Vue from "vue";
import slideVerify from "vue-monoplasty-slide-verify";
Vue.use(slideVerify);

最后直接在页面中使用就可以了，相关的参数，页面展示如下

<template>
  <div>
    <button @click="demo=true">打开</button>
    <!-- 弹窗不要设置宽，因为页面是自适应的，如果设置了宽，而组件不能同步，可能会出现大片的空白或者图片溢出弹窗，所以弹窗的宽高要靠组件中图片撑开 -->
    <van-popup
      v-model="demo"
      :close-on-click-overlay="false"
    >
      <div class="line-two">
        <slide-verify
          :l="slideObj.l"
          :r="slideObj.r"
          :w="slideObj.w"
          :h="slideObj.h"
          slider-text="请拖动滑块完成验证再确认领取"
          @success="onSuccess"
          @fail="onFail"
          @refresh="onRefresh"
          :imgs="imgs"
          :accuracy='5'
        ></slide-verify>
        <!-- accuracy容错率 -->
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      slideObj: {
        l: 42, //滑动碎片的大小
        r: 10, //滑动碎片的圆角
        w: 310, //画布的宽
        h: 155, //画布的高
      },
      demo: false,
      imgs: [
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fitbbs%2F1411%2F03%2Fc11%2F40513136_1415006215595.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658045243&t=66cafeed4b05e3cc2337bd619564552a",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0146425bbdc6efa801213dead7d60e.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658045243&t=e11d669624d5ac428996e933f67f5d93",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201804%2F28%2F20180428190056_cnorp.jpg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658045243&t=a174254b82136a546d08f4e903dddb59",
        "https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/baike/pic/item/14ce36d3d539b6005fd3d015e550352ac65cb777.jpg",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbkimg.cdn.bcebos.com%2Fpic%2F18d8bc3eb13533fa828b4f630598ea1f4134970aed60&refer=http%3A%2F%2Fbkimg.cdn.bcebos.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658045243&t=fb598fe1de3576cf76269f913d9fad0b",
      ], //可以将所需的图片放在一个数组中，刷新后组件会自动随机抽取图片
    };
  },
  mounted() {
    let clientWidth = document.documentElement.clientWidth; //获取HTML文档所在窗口的当前宽度
    let ratio = (clientWidth / 375) * 20; //计算基数为40的比例,然后动态计算画布在当前窗口的宽高，撑开弹窗
    this.slideObj.l = 1.2 * ratio;
    this.slideObj.r = 0.3 * ratio;
    this.slideObj.w = 12.6 * ratio;
    this.slideObj.h = 7.8 * ratio;
  },
  methods: {
    onSuccess() {
      console.log("成功回调");
    },
    onFail() {
      console.log("失败回调");
    },
    onRefresh() {
      console.log("刷新回调");
    },
  },
};
</script>

<style>
.line-two {
  padding: 1rem;
  background: white;
}
</style>