«

vue如何实现左滑图片验证功能

时间:2024-8-6 09:04     作者:韩俊     分类: Javascript


这篇“vue如何实现左滑图片验证功能”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue如何实现左滑图片验证功能”文章吧。

一、安装

使用

npm
安装
vue-monoplasty-slide-verify
插件。

npm i vue-monoplasty-slide-verify --savve
cnpm i vue-monoplasty-slide-verify --savve //镜像安装

接着我们在

main.js
中引入。

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

二、使用

在使用之前我们先来看看它的一些属性和回调函数。

属性

参数描述
l滑动碎片的大小
r滑动碎片的圆角
w画布的宽
h画布的高
imgs背景图数组,默认值 [],为 [] 时随机加载插件图片
accuracy滑动验证的误差范围,默认值 5
show是否显示刷新按钮,默认值 true

回调函数

函数名描述
success返回时间参数,单位为毫秒
fail验证不通过时的回调函数
refresh点击刷新按钮后的回调函数
again检测到非人为操作滑动时触发的回调函数
fulfilled刷新成功之后的回调函数

在父组件里如果需要重置,可以在父组件中调用子组件

reset()
方法。

1. 指定

ref
的值

<slide-verify ref="slideblock" ></slide-verify>

2. 调用

this.$refs.slideblock.reset();

以上是我们实现这个功能基本都会用到的一些配置,感兴趣的同学可以去 官网文档 查看更详细的内容。下面我们试着来用代码实现这个功能。

为了方便在项目中使用,我直接将其封装成公共的组件,这样无论在任何页面都可以直接引入使用,如果需要修改配置,可通过

props
emit
传参修改在组件中写死的属性值。

封装文件(子组件)

文件路径:

src/components/verification/index.vue

<template>
  <div>
    <!-- vant 弹框组件,也可自定义弹框 -->
    <van-popup v-model="isShowSlide" :visible.sync="isShowSlide" @close="$emit('update:dialogChild', false)">
      <div class="contantBox">
        <p>安全验证</p>
        <slide-verify :l="canvas.l" :r="canvas.r" :w="canvas.w" :h="canvas.h" ref="slideblock" @again="onAgain" @fulfilled="onFulfilled"
          @success="onSuccess" @fail="onFail" @refresh="onRefresh" :accuracy="3" :imgs="imgs" slider-text="拖动滑块完成拼图">
        </slide-verify>
        <!-- 耗时 -->
        <div>{{timeDate}}</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timeDate: "", //耗时
      canvas: {
        l: 28, //滑动碎片的大小
        r: 7, //滑动碎片的圆角
        w: 300, //画布的宽
        h: 160, //画布的高
      },
      isShowSlide: false, //弹框显隐
      imgs: [
        require("@/assets/1.png"),
        require("@/assets/2.png"),
        require("@/assets/3.png"),
      ], //自定义的随机图片
      timer: null, //定时器
    };
  },
  props: {
    dialogChild: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    dialogChild: {
      handler(newName, oldName) {
        this.isShowSlide = newName;
      },
      deep: true,
    },
  },
  methods: {
    // 返回时间参数,单位为毫秒
    onSuccess(times) {
      this.$emit("successOn", times);
      this.timeDate = "验证通过,耗时" + (times / 1000).toFixed(1) + "s";
      // 成功后关闭弹框
      this.timer = setInterval(() => {
        this.isShowSlide = false;
      }, 1000);
    },
    // 验证不通过时的回调函数
    onFail() {
      this.$emit("failOn");
      console.log("验证不通过");
      this.timeDate = "";
    },
    // 点击刷新按钮后的回调函数
    onRefresh() {
      this.$emit("refreshOn");
      console.log("点击了刷新图标");
      this.timeDate = "";
    },
    // 刷新成功之后的回调函数
    onFulfilled() {
      this.$emit("fulfilledOn");
      console.log("刷新成功");
    },
    // 检测到非人为操作滑动时触发的回调函数
    onAgain() {
      this.$emit("againOn");
      console.log("检测到非人为操作的哦");
      // 刷新
      this.$refs.slideblock.reset();
    },
    // 父组件调用刷新方法(每次进来重置组件)
    handleClick() {
      this.$nextTick(() => {
        this.timeDate = "";
        clearInterval(this.timer);//清除定时器
        this.$refs.slideblock.reset();
      });
    },
  },
};
</script>
<style scoped>
p {
  display: flex;
  justify-content: center;
  font-size: 15px;
  margin: 8px 0px;
}
.contantBox {
  padding: 0px 8px 8px 8px;
}
</style>

组件内使用(父组件)

<template>
  <div>
    <!-- 使用组件 -->
    <van-button @click="verifyOn" round color="linear-gradient(to right,#FE566D, #F83D2A)" type="primary" block>获取验证码</van-button>
    <!-- 如若想要修改其它参数通过props动态传值即可 -->
    <verification ref="parent" :dialogChild.sync="isShowSlide" />
  </div>
</template>

<script>
// 引入组件
import verification from "@/components/verification";
export default {
  data() {
    return {
      isShowSlide: false,
    };
  },
  components: {
    verification,
  },
  methods: {
    // 点击获取验证码按钮
    verifyOn() {
      this.isShowSlide = true;
      // 每次点击都触发一下重置验证组件的方法
      this.$refs.parent.handleClick();
    },
  },
};
</script>

实现效果

标签: javascript vue

热门推荐