Skip to content
On this page

Validate

滑块验证

图片验证

局部显示

vue
<template>
    <op-button type="primary" @click="showImg = true">图片验证</op-button>
    <op-validate 
        :show="showImg"
        img-url="https://b18.dgcn.com/demo/captcha/getDemoPicCaptcha.ujson?captchaType=2" 
        vali-url="https://b18.dgcn.com/demo/captcha/validateDemoPicCaptcha.ujson"
        @close="showImg = false"
        @success="success"
    />
<template>

<script setup>
import { ref } from 'vue'

const showImg = ref(false)

const success = (token) => {
    alert('验证成功!token:' + token)
    showImg.value = false
}
</script>

Api

PropertyDescriptionTypeDefault
show显示隐藏booleanfalse
img-url获取图片urlstring
vali-url验证urlstring
container插入位置stringbody
Events NameDescriptionArguments
success验证成功回调(token) => void
fail验证失败回调() => void
close关闭弹窗() => void