vue3滑块验证使用vue3-slide-verify，宽度自适应

vue3-slide-verify地址：https://gitee.com/monoplasty/vue3-slide-verify，使用方法gitee上面写得挺详细的，在这里增加点补充。

1.引入使用

1.1安装npm依赖

npm install --save vue3-slide-verify

1.2使用

在需要用到的组件中注册

import SlideVerify, { SlideVerifyInstance } from "vue3-slide-verify";
import "vue3-slide-verify/dist/style.css";

参考如下写法：

<template>
  <div>
    <slide-verify
      :l="42"
	  :r="10"
	  :w="400"
	  :h="200"      
      ref="block"
      :imgs="imgs"
      :slider-text="text"
      :accuracy="accuracy"
      @again="onAgain"
      @success="onSuccess"
      @fail="onFail"
      @refresh="onRefresh"
    ></slide-verify>
    <button class="btn" @click="handleClick">在父组件可以点我刷新哦</button>
    <div>{{ msg }}</div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
// 局部注册组件，需要单独引用组件样式
// 只提供局部引用的方式，不再采用插件形式，方便按需加载，减少主包大小
import SlideVerify, { SlideVerifyInstance } from "vue3-slide-verify";
import "vue3-slide-verify/dist/style.css";

import img from "../assets/images/1.jpeg";

export default defineComponent({
  components: { SlideVerify },

  setup() {
    const msg = ref("");
    const block = ref<SlideVerifyInstance>();
    const imgs = ref([img,img,img,img]);

    const onAgain = () => {
      msg.value = "检测到非人为操作的哦！ try again";
      // 刷新
      block.value?.refresh();
    };

    const onSuccess = (times: number) => {
      msg.value = `login success, 耗时${(times / 1000).toFixed(1)}s`;
    };

    const onFail = () => {
      msg.value = "验证不通过";
    };

    const onRefresh = () => {
      msg.value = "点击了刷新小图标";
    };

    const handleClick = () => {
      // 刷新
      block.value?.refresh();
      msg.value = "";
    };

    return {
      imgs,
      block,
      msg,
      text: "向右滑动->",
      accuracy: 1,
      onAgain,
      onSuccess,
      onFail,
      onRefresh,
      handleClick,
    };
  },
});
</script>

模板中的一些参数解释：
l：滑块（拼图块）的边长
r：滑块（拼图块）圆的半径
w：整个验证模块、canvas的宽
h：整个验证模块、canvas的高
imgs：验证的图片数组，图片需使用import引入
slider-text：滑块显示文本

2.验证模块宽度自适应

错误模板：

<div name="verify" :class="isShowCanvas?'showCanvas':''" class="enter-x" id="verify">
  <slide-verify
    ref="verify"
    :l="42"
    :r="10"
    :w="verifyWidth"
    :h="267"
    :slider-text="sliderText"
    :accuracy="accuracy"
    :imgs="verifyImgs"
    @again="verifyAgain"
    @success="verifySuccess"
    @fail="verifyFail"
    @refresh="verifyRefresh"
  ></slide-verify> 
  <div :class="isVerifySuccess?'text-green-400':'text-red-400'">{{ verifyMsg }}</div>   
</div>

上面的例子中，使用verifyWidth来动态控制宽度。当页面宽度改变时，改变verifyWidth，这样验证模块的宽度也会跟着改变。但事实是，滑动条的宽度改变了，canvas的宽度也改变了，但是canvas中绘制的图片宽度不变。估计是因为canvas宽度改变，但是vue3-slide-verify这个组件绘制图片的代码没有改变绘制的图片宽度，绘制的图片宽度依旧是初始化的图片宽度。所以使用了v-if来让vue3-slide-verify这个组件刷新，让canvas重新绘制图片，这样就可以实现宽度自适应了。另外verifyWidth的初始化定义应该是 const verifyWidth = ref()，咱实力有限也不知道为什么这么设才有用，但是就这么设吧😁

正确模板：

<template>
<div name="verify" :class="isShowCanvas?'showCanvas':''" class="enter-x" id="verify">
  <slide-verify
    v-if="reload"
    ref="verify"
    :l="42"
    :r="10"
    :w="verifyWidth"
    :h="267"
    :slider-text="sliderText"
    :accuracy="accuracy"
    :imgs="verifyImgs"
    @again="verifyAgain"
    @success="verifySuccess"
    @fail="verifyFail"
    @refresh="verifyRefresh"
  ></slide-verify> 
  <div :class="isVerifySuccess?'text-green-400':'text-red-400'">{{ verifyMsg }}</div>   
</div>
</template>

<script lang="ts" setup>
  import { reactive, ref, unref, onMounted, computed, nextTick } from 'vue';
  import SlideVerify, { SlideVerifyInstance } from "vue3-slide-verify";
  import "vue3-slide-verify/dist/style.css";
  import img from "../../../assets/images/1.jpeg";


  const verifyMsg = ref("");
  const sliderText = ref("向右滑动->") //滑块文字
  const accuracy = ref(1) //精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
  const verify = ref<SlideVerifyInstance>();
  const verifyImgs = ref([img,img,img,img])
  const verifyWidth = ref()
  const reload = ref(false)//用于v-if让组件SlideVerify刷新，如果不刷新，页面宽度改变的情况下，组件SlideVerify中canvas绘制的图片宽度不会改变
  const isShowCanvas = ref(false)
  const isVerifySuccess = ref(false)

  onMounted(()=> {
    setWerifyWidth()
    window.onresize = () => {
      reload.value = false
      setWerifyWidth()
    }
  })
  async function setWerifyWidth() {
    let verify = await getverify()
    verifyWidth.value = verify.offsetWidth
    reload.value = true
  }
  function getverify() {
    return new Promise((resolve,reject) => {
      //要写在定时器里面才能够获取得到document.getElementById('verify')的值
      //本例子这里是id为verify的元素宽度是自适应的，获取到这个宽度，将验证模块的宽度也设为这个宽度
      //具体方法具体实现，可参考本例子
      let timer = setTimeout(function(){
        let verify = document.getElementById('verify')
        clearTimeout(timer)
        resolve(verify)
      },1);
    })
  }
  
  function verifySuccess (times: number) {
    isVerifySuccess.value = true
    verifyMsg.value = `验证成功, 耗时${(times / 1000).toFixed(1)}s`;
  }

  function verifyFail() {
    verifyMsg.value = "验证不通过";
  };

  function verifyRefresh () {
    //点击刷新小图标
    isVerifySuccess.value = false
    // verifyMsg.value = "点击刷新";
  };

  function handleClick () {
    // 刷新
     isVerifySuccess.value = false
    verify.value?.refresh();
    verifyMsg.value = "";
  };
</script>

这篇好文章是转载于：学新通技术网