Overview:

The vue-monoplasty-slide-verify is a Vue plugin designed for slide verification. It offers features such as customizable slider text, image array support, precision settings, and callbacks for success and failure events.

Features:

• Block Length (l): Number to define the block length.
• Block Circle Radius (r): Number to set the block circle radius.
• Canvas Width (w): Number to specify the canvas width.
• Canvas Height (h): Number to indicate the canvas height.
• Slide Filled Right Text (sliderText): Text to display when slide verification is successful.
• Picture Array Support (imgs): Array to provide background images, default is an empty array.
• Accuracy Setting (accuracy): Number to determine the verification error range.
• Refresh Button Display (show): Boolean to control the visibility of the refresh button.
• Callback Functions (callBack):
  • Success: Callback function for a successful verification.
  • Fail: Callback function for a failed verification.
  • Refresh: Callback function triggered after clicking the refresh button.
  • Again: Callback function for detecting non-human slide operations.
  • Fulfilled: Callback function after a successful refresh.

Installation:

To install the vue-monoplasty-slide-verify plugin:

1. Import vue-monoplasty-slide-verify into your Vue.js project.

import SlideVerify from 'vue-monoplasty-slide-verify';
Vue.use(SlideVerify, {
  l: 50,
  r: 12,
  w: 300,
  h: 200,
  sliderText: 'Slide to Verify',
  imgs: [],
  accuracy: 5,
  show: true,
  callBack: {
    success: () => {
      // success callback logic
    },
    fail: () => {
      // fail callback logic
    },
    refresh: () => {
      // refresh callback logic
    },
    again: () => {
      // again callback logic
    },
    fulfilled: () => {
      // fulfilled callback logic
    }
  }
});

Summary:

The vue-monoplasty-slide-verify plugin for Vue offers a customizable solution for implementing slide verification in web applications. With features such as precision settings, callback functions, and support for background images, this plugin enhances security and user experience. Additionally, the ability to control the appearance of elements like the refresh button adds flexibility to the verification process.