1 Star 0 Fork 120

eddylapis / vue-monoplasty-slide-verify

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
README.md 2.56 KB
一键复制 编辑 原始数据 按行查看 历史
yuqian 提交于 2019-12-13 18:05 . modify readme

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.0.6 版本新增属性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
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/eddylapis/vue-monoplasty-slide-verify.git
git@gitee.com:eddylapis/vue-monoplasty-slide-verify.git
eddylapis
vue-monoplasty-slide-verify
vue-monoplasty-slide-verify
master

搜索帮助

344bd9b3 5694891 D2dac590 5694891