Vue3使用拼图验证码校验

1、在Vue3中使用图片拼图验证码npm i vue3-slide-verify（详见）
2、代码中使用（未封装，有需要可以封装）

<div>
  <slide-verify ref="block" slider-text="向右滑动->" :accuracy="1" @again="onAgain" @success="onSuccess"
    @fail="onFail" @refresh="onRefresh"></slide-verify>
  <button class="btn" @click="handleClick">在父组件可以点我刷新哦</button>
  <div>{{ msg }}</div>
</div>

<script>
import { toRefs, reactive, ref } from 'vue'
// 局部注册组件，需要单独引用组件样式
// 只提供局部引用的方式，不再采用插件形式，方便按需加载，减少主包大小
import SlideVerify from "vue3-slide-verify";
import "vue3-slide-verify/dist/style.css";
export default {
  components: { SlideVerify },
  setup(props, { emit }) {
    const msg = ref("");
    const block = ref();
    // 传参
    const state = reactive({
    })
    const onAgain = () => {
      msg.value = "检测到非人为操作的哦！ try again";
      // 刷新
      block.value?.refresh();
    }

    const onSuccess = (times) => {
      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 {
      block,
      msg,
      onAgain,
      onSuccess,
      onFail,
      onRefresh,
      handleClick,
    }
  }
}
</script>

3、其他备注

argument

callBack