一个基于 vue3.js 的字符输入校验插件.
vue-cli 中使用
- 首先安装插件
# npm 安装:
npm install character-verify-v3 -S
-
main.js
中引入
import CharacterVerify from 'character-verify-v3'
import 'character-verify-v3/lib/CharacterVerify.css'
createApp(App).use(CharacterVerify)
- 组件中声明
<template>
<div>
<CharacterVerify ref="characterVerifyRef" @reload="emitChange('reload')" @success="emitChange('success')" @fail="emitChange('fail')"></CharacterVerify>
</div>
</template>
-
vWidth: 校验区块宽度, String 类型, 默认
180px
. -
vHeight: 校验区块高度, String 类型, 默认
50px
. -
vLength: 字符长度, Number 类型, 默认
4
. -
vFontSize: 默认字体大小, String 类型, 默认
30px
. -
bgPngUrlList: 背景干扰图案集合, Array 类型, 默认
默认图库
. -
inputHeight: 输入框高度, String 类型, 默认
35px
. -
btnContent: 校验按钮文本, String 类型, 默认
验证
. -
btnColor: 校验按钮颜色, String 类型, 默认
#1989fa
. -
sText: 校验成功的提示, String 类型, 默认
验证通过
, 传空字符则不弹出. -
eText: 校验失败的提示, String 类型, 默认
验证失败
, 传空字符则不弹出. -
isShowTip: 校验结果轻提示, 默认
true
- success: 校验成功时触发.
- fail: 校验失败时触发.
- reload: 刷新时触发.
- onReset: 刷新.