短視訊直播原始碼，拖動滑塊實現圖片驗證效果

短視訊直播原始碼，拖動滑塊實現圖片驗證效果

1、 基本滑塊驗證元件

// 安裝
npm i vue-drag-verify2 -S
// 引用： main.js 中引用
import Vue from 'vue'
import dragVerify from 'vue-drag-verify2'
Vue.use(dragVerify)
<template>
  <div>
    <h3>模組驗證：</h3>
    <div class="verifybox">
      <el-row style="margin-top:10px;">
        <drag-verify ref="dragVerify" :width="300" :isPassing.sync="isPassing" text="請按住滑塊拖動" successText="驗證通過"
          handlerIcon="el-icon-d-arrow-right" successIcon="el-icon-circle-check" @passcallback="passcallback">
          <i v-show="!isPassing" slot="textBefore" class="el-icon-lock"></i>
        </drag-verify>
      </el-row>
      <el-button style="margin-top:5px;margin-left:10px;" size="small" @click="reset">還原</el-button>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        isPassing: false
      }
    },
    methods: {
      passcallback() {
        this.$message({
          message: "驗證通過",
          type: "success"
        });
      },
      reset() {
        this.isPassing = false;
        this.$refs.dragVerify.reset()
      },
    },
  }
</script>
<style>
  .verifybox {
    display: flex;
  }
</style>

2、圖片滑塊元件

// 安裝
npm i vue-drag-verify-img -S
<template>
  <div>
    <h3>圖片滑塊：</h3>
    <dragVerifyImg ref="dragVerify" :imgsrc=" imgsrc" :isPassing.sync="isPassing" :showRefresh="true" text="請按住滑塊拖動"
      successText="驗證通過" handlerIcon="el-icon-d-arrow-right" successIcon="el-icon-circle-check"
      @passcallback="passcallback">
    </dragVerifyImg>
    <el-button type="primary" @click="reset">還原</el-button>
  </div>
</template>
<script>
  import dragVerifyImg from 'vue-drag-verify-img'
  export default {
    data() {
      return {
        isPassing: false,
        value: "",
        imgsrc: "
      }
    },
    components: {
      dragVerifyImg
    },
    methods: {
      passcallback() {
        this.$message({
          message: "驗證通過",
          type: "success"
        });
      },
      reset() {
        this.isPassing = false;
        this.$refs.dragVerify.reset()
      },
    },
  }
</script>
<style>
  .verifybox {
    display: flex;
  }
</style>

以上就是 短視訊直播原始碼，拖動滑塊實現圖片驗證效果，更多內容歡迎關注之後的文章