Skip to content
vue slide verify online preview
Vue JavaScript HTML
Branch: master
Clone or download
Latest commit 49109ad Dec 13, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src add imgs array Dec 13, 2019
.babelrc git init Aug 9, 2018
.editorconfig git init Aug 9, 2018
.gitignore git init Aug 9, 2018
README.md modify readme Dec 13, 2019
index.html mobile touch event support Jan 31, 2019
package.json github pkg Dec 13, 2019
webpack.config.js update online demo Dec 13, 2019

README.md

vue-monoplasty-slide-verify

A Vue plugin to slide verify Demo

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

Quick Start

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

Using build tools:

npm install --save vue-monoplasty-slide-verify
import Vue from 'vue';
import SlideVerify from 'vue-monoplasty-slide-verify';

Vue.use(SlideVerify);

2. Now you have it. The simplest usage:

<slide-verify :l="42"
            :r="10"
            :w="310"
            :h="155"
            slider-text="向右滑动"
            @success="onSuccess"
            @fail="onFail"
            @refresh="onRefresh"
            ></slide-verify>
<div>{{msg}}</div>
export default {
        name: 'App',
        data(){
            return {
                msg: '',
            }
        },
        methods: {
            onSuccess(){
                this.msg = 'login success'
            },
            onFail(){
                this.msg = ''
            },
            onRefresh(){
                this.msg = ''
            }
        }
    }

Document

内置方法

  • 在父组件里如果需要重置,可以在父组件中调用子组件reset() 方法
<slide-verify ref="slideblock" ></slide-verify>
this.$refs.slideblock.reset();
  • V1.1.0 版本新增属性imgs
    • imgs不传或者传空数组时,图片库默认使用第三方api提供的图片路径。可能加载缓慢;
    • imgs传本地路径时,确保图片路径是否正确。建设传cdn上的图片地址。
    • 详情可参考APP.vue上的写法。或在线查看demo地址
  • gitee镜像地址

argument

Param Type Describe
l Number block length
r Number block circle radius
w Number canvas width
h Number canvas height
sliderText String Slide filled right
imgs Array picture array

callBack

Event Type Describe
success Function success callback
fail Function fail callback
refresh Function refresh button callback

Log

V1.0.2

  • Mobile terminal touch event support

V1.0.5

  • add slider text

V1.1.0

  • add img array
You can’t perform that action at this time.