第一步:npm install --save vue-monoplasty-slide-verify

第二步:main.js配置

import Vue from 'vue';

import SlideVerify from 'vue-monoplasty-slide-verify';

Vue.use(SlideVerify);

第三步:vue页面或组件:

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

Logo

前往低代码交流专区

更多推荐