XCaptcha 图形验证码

示例

基础用法

<template>
  <div>
    <XCaptcha
      v-model="value"
      :src="src"
      :validate="validate"
      placeholder="1234"></XCaptcha>
    <XCaptcha :src="src" size="large"></XCaptcha>
    <XCaptcha :src="src" size="small"></XCaptcha>
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { XCaptcha } from '@vtj/ui';

  const value = ref('');

  const src = () => {
    return (
      'https://sso-sit.newpearl.com/api/user/verifyImage.jpg?uuid=' + Date.now()
    );
  };

  const validate = () => {
    if (value.value === '1234') {
      return true;
    }
    return false;
  };

  watch(value, (v) => {
    console.log('change', v);
  });
</script>

<style lang="scss" scoped>
  .x-captcha {
    margin-top: 20px;
  }
</style>

API

属性

属性名	说明	类型	默认值
src	图片加载函数	function	-
maxlength	验证码长度	number	4
placeholder	占位文本	string	-
validate	校验规则	function	-
size	尺寸	string	-