vue如何實現(xiàn)左滑圖片驗證功能

這篇“vue如何實現(xiàn)左滑圖片驗證功能”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue如何實現(xiàn)左滑圖片驗證功能”文章吧。

一、安裝

使用 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);

二、使用

在使用之前我們先來看看它的一些屬性和回調(diào)函數(shù)。

屬性

回調(diào)函數(shù)

在父組件里如果需要重置，可以在父組件中調(diào)用子組件 reset() 方法。

1. 指定 ref 的值

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

2. 調(diào)用

this.$refs.slideblock.reset();

以上是我們實現(xiàn)這個功能基本都會用到的一些配置，感興趣的同學可以去 官網(wǎng)文檔 查看更詳細的內(nèi)容。下面我們試著來用代碼實現(xiàn)這個功能。

為了方便在項目中使用，我直接將其封裝成公共的組件，這樣無論在任何頁面都可以直接引入使用，如果需要修改配置，可通過 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: {
    // 返回時間參數(shù)，單位為毫秒
    onSuccess(times) {
      this.$emit("successOn", times);
      this.timeDate = "驗證通過，耗時" + (times / 1000).toFixed(1) + "s";
      // 成功后關閉彈框
      this.timer = setInterval(() => {
        this.isShowSlide = false;
      }, 1000);
    },
    // 驗證不通過時的回調(diào)函數(shù)
    onFail() {
      this.$emit("failOn");
      console.log("驗證不通過");
      this.timeDate = "";
    },
    // 點擊刷新按鈕后的回調(diào)函數(shù)
    onRefresh() {
      this.$emit("refreshOn");
      console.log("點擊了刷新圖標");
      this.timeDate = "";
    },
    // 刷新成功之后的回調(diào)函數(shù)
    onFulfilled() {
      this.$emit("fulfilledOn");
      console.log("刷新成功");
    },
    // 檢測到非人為操作滑動時觸發(fā)的回調(diào)函數(shù)
    onAgain() {
      this.$emit("againOn");
      console.log("檢測到非人為操作的哦");
      // 刷新
      this.$refs.slideblock.reset();
    },
    // 父組件調(diào)用刷新方法（每次進來重置組件）
    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>

組件內(nèi)使用（父組件）

<template>
  <div>
    <!-- 使用組件 -->
    <van-button @click="verifyOn" round color="linear-gradient(to right,#FE566D, #F83D2A)" type="primary" block>獲取驗證碼</van-button>
    <!-- 如若想要修改其它參數(shù)通過props動態(tài)傳值即可 -->
    <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;
      // 每次點擊都觸發(fā)一下重置驗證組件的方法
      this.$refs.parent.handleClick();
    },
  },
};
</script>

實現(xiàn)效果

以上就是關于“vue如何實現(xiàn)左滑圖片驗證功能”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關的知識內(nèi)容，請關注億速云行業(yè)資訊頻道。