vue使用云片滑块验证码

文档地址https://www.yunpian.com/official/document/sms/zh_CN/captcha_captcha_service_h5

效果图

封装成组件

<template>
    <div class="Yp">
        <div id="wrap" class="middleCenter" v-show="show"></div>
    </div>
</template>

<script>
export default {
    name:'Yp',
    data () {
        return {

        }
    },
    props:{
        visible:{
            required:true,
            type:Boolean,
            default:false
        },
    },
    computed:{
        show:{
            get(){
                return this.visible
            },
            set(v){
                this.$emit('close',v)
            }
        }
    },
    methods:{
        getYunPian(){
            this.$loading.show()
            const THIS = this
            new YpRiddler({
                expired: 10,
                mode: 'flat',
                winWidth: '90%',
                noButton:true,
                lang: 'zh-cn', // 界面语言, 目前支持: 中文简体 zh-cn, 英语 en
                // langPack: LANG_OTHER, // 你可以通过该参数自定义语言包, 其优先级高于lang
                container: document.getElementById('wrap'),
                appId: '你的id',
                version: 'v1',
                onError: function (param) {
                    THIS.$emit('onError',param)
                    THIS.$loading.hide()
                        if (!param.code) {
                            THIS.$toast('错误请求');
                        }
                        else if (parseInt(param.code / 100) == 5) {
                            // 服务不可用时，开发者可采取替代方案
                            THIS.$toast('验证服务暂不可用');
                        }
                        else if (param.code == 429) {
                            THIS.$toast('请求过于频繁，请稍后再试');
                        }
                        else if (param.code == 403) {
                            THIS.$toast('请求受限，请稍后再试');
                        }
                        else if (param.code == 400) {
                            THIS.$toast('非法请求，请检查参数');
                        }
                    // 异常回调
                    THIS.$toast('验证服务异常')
                },
                onSuccess: function (validInfo, close, useDefaultSuccess) {
                    // 成功回调
                    // alert('验证通过! token=' + validInfo.token + ', authenticate=' + validInfo.authenticate)
                    // 验证成功默认样式
                    useDefaultSuccess(true)
                    close()
                    THIS.$emit('onSuccess',validInfo)
                },
                onFail: function (code, msg, retry) {
                    THIS.$loading.hide()
                    // 失败回调
                    // alert('出错啦：' + msg + ' code: ' + code)
                    retry()
                    THIS.$emit('onFail',code,msg)
                },
                beforeStart: function (next) {
                    THIS.$loading.hide()
                    next()
                }
            })
        }
    }
}
</script>

<style lang='stylus' scoped>
    .Yp{
        #wrap{
            position fixed 
            width 100%
            height 100%
            top 0
            left 0
            background rgba(0,0,0,.5)
            box-sizing border-box 
            z-index 9999
            
        }
    }
</style>

使用组件

<template>
  <div class="login-bg">
   
      
      <van-button block @click="submit" class="login-btn">使用滑块</van-button>
    
    <Yp
      :visible="visible"
      ref="Yp"
      @onSuccess="YpSuccess"
    />
  </div>
</template>

<script>
import Yp from '@/components/Yp'

export default {
  mounted() {},
  data() {
    return {
      visible:false,
    };
  },
  components:{
    Yp
  },
  methods: {
    YpSuccess(info){
    	// 成功之后的回调
          console.log(info)
    },
    submit() {
      this.visible = true
      this.$refs.Yp.getYunPian()
    }
  }
};
</script>

最后

以上就是敏感香水为你收集整理的vue使用云片滑块验证码的全部内容，希望文章能够帮你解决vue使用云片滑块验证码所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。