0.1.20 • Published 3 years ago
cmsk-fontend-libs v0.1.20
cmsk-fontend-libs
城科前端组件管理仓库
使用
安装
npm i cmsk-fontend-libs // or yarn add cmsk-fontend-libs
vue 中使用
全局安装方式 (不推荐)
import Vue from 'vue'
import Verify from 'cmsk-fontend-libs'
Vue.use(Verify)
局部安装
import {SliderCaptcha, ClickWordCaptcha} from 'cmsk-fontend-libs'
组件介绍
拖拽图形验证码 (SliderCaptcha) 和 文字点击确认验证码(ClickWordCaptcha)
<SliderCaptcha
v-model="verifyVisible"
:imageInfo="imageInfo"
:imgSize="{width: '90%', height: 140}"
:checkTips="checkTips"
:check-status="checkStatus"
:refresh="getPictrue"
@success="successHandle"
@actionEnd="handleActionEnd"
@checkStatusChange="checkStatusChange"
ref="verify"
></SliderCaptcha>
tips: 适应移动端, imgSize: 可传百分比,根据文档
document.body
宽度计算 pc建议尺寸: 400, 200
接入方式,可参考 examples/App.vue
- 需要生成客户端uuid,用于服务端通信
- 获取图片验证码相关的信息,此处自己完成接口
根据组件响应的不同事件完成相关的动作
refresh // 此参数,需要获取验证码图片信息 actionEnd // 拖拽验证码 此为松开鼠标时的事件 点击文字验证此为点击数等于默认数时的事件 此时会响应对应的信息 // 需要调用校验接口进行数据校验,校验成功需要改变组件的检验状态 checkStatus // 此处有三种状态 'waiting', 'success', 'error' success // 成功后的回调 checkStatusChange // 响应校验状态的改变并保存
暴露的类型
参考源码 src/@types
参数
// SliderCaptcha
// 验证码出现类型 pop=>弹窗 fixed=>悬浮
public mode: CaptchaPositionType
// 验证码当前校验状态
public checkStatus: CheckStatusType
// 距离顶部或者底部的距离
public vSpace: number
// 滑块说明文字
public explain: string
// 验证提示文字
public checkTips: string
// 重新刷新的方法
public refresh: () => void
// 图片大小
public imgSize: ImageSizeType
// 图片信息
public imageInfo: ImageInfoType
// 滑块大小
public blockSize: ImageSizeType
// 滑道大小
public barSize: ImageSizeType
// ClickWordCaptcha
// 验证码出现类型 pop=>弹窗 fixed=>悬浮
public mode: CaptchaPositionType
// 验证码当前校验状态
public checkStatus: CheckStatusType
// 距离顶部或者底部的距离
public vSpace: number
// 滑块说明文字
public explain: string
// 重新刷新的方法
public refresh: () => void
// 图片大小
public imgSize: ImageSizeType
// 图片信息
public imageInfo: ImageInfoType
// 滑道大小
public barSize: ImageSizeType
0.1.20
3 years ago
0.1.19
3 years ago
0.1.18
3 years ago
0.1.17
3 years ago
0.1.16
3 years ago
0.1.15
3 years ago
0.1.14
3 years ago
0.1.13
3 years ago
0.1.12
3 years ago
0.1.11
3 years ago
0.1.10
3 years ago
0.1.9
3 years ago
0.1.8
3 years ago
0.1.7
3 years ago
0.1.6
3 years ago
0.1.5
3 years ago
0.1.4
3 years ago
0.1.3
3 years ago
0.1.2
3 years ago
0.1.1
3 years ago
0.1.0
3 years ago