# cmsk-fontend-libs > 验证码组件 Latest version **0.1.20** (published 2021-05-17) · 0 weekly downloads ## Install ```sh npm install cmsk-fontend-libs pnpm add cmsk-fontend-libs yarn add cmsk-fontend-libs bun add cmsk-fontend-libs ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities. Warnings: low downloads; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.20 | | Published | 2021-05-17 | | First published | 2021-05-08 | | Weekly downloads | 0 | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 5 | | Unpacked size | 4.5 MB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | Author | cavinHuang | | Maintainers | sujinw | ## Links - npm: https://www.npmjs.com/package/cmsk-fontend-libs - Repository: https://github.com/CavinHuang/cmsk-frontend-libs - Homepage: https://github.com/CavinHuang/cmsk-frontend-libs#readme - Issues: https://github.com/CavinHuang/cmsk-frontend-libs/issues - npm.io page: https://npm.io/package/cmsk-fontend-libs ## Dependencies (5) - [vue](https://npm.io/package/vue.md) ^2.6.11 - [core-js](https://npm.io/package/core-js.md) ^3.6.5 - [crypto-js](https://npm.io/package/crypto-js.md) ^4.0.0 - [vue-router](https://npm.io/package/vue-router.md) ^3.2.0 - [@types/crypto-js](https://npm.io/package/@types/crypto-js.md) ^4.0.1 ## Recent versions - 0.1.20 (latest) — 2021-05-17 - 0.1.19 — 2021-05-17 - 0.1.18 — 2021-05-13 - 0.1.17 — 2021-05-13 - 0.1.16 — 2021-05-11 - 0.1.15 — 2021-05-10 - 0.1.14 — 2021-05-10 - 0.1.13 — 2021-05-10 - 0.1.12 — 2021-05-10 - 0.1.11 — 2021-05-10 - 0.1.10 — 2021-05-08 - 0.1.9 — 2021-05-08 - 0.1.8 — 2021-05-08 - 0.1.7 — 2021-05-08 - 0.1.6 — 2021-05-08 - … 6 more at https://npm.io/package/cmsk-fontend-libs/versions ## README # cmsk-fontend-libs > 城科前端组件管理仓库 ## 使用 ### 安装 ```bash npm i cmsk-fontend-libs // or yarn add cmsk-fontend-libs ``` ### vue 中使用 #### 全局安装方式 (不推荐) ```js import Vue from 'vue' import Verify from 'cmsk-fontend-libs' Vue.use(Verify) ``` #### 局部安装 ```js import {SliderCaptcha, ClickWordCaptcha} from 'cmsk-fontend-libs' ``` ## 组件介绍 ### 拖拽图形验证码 (SliderCaptcha) 和 文字点击确认验证码(ClickWordCaptcha) ```js ``` > tips: 适应移动端， imgSize: 可传百分比，根据文档`document.body`宽度计算 pc建议尺寸: 400, 200 #### 接入方式，可参考 examples/App.vue - 需要生成客户端uuid，用于服务端通信 - 获取图片验证码相关的信息，此处自己完成接口 - 根据组件响应的不同事件完成相关的动作 ```js refresh // 此参数，需要获取验证码图片信息 actionEnd // 拖拽验证码 此为松开鼠标时的事件 点击文字验证此为点击数等于默认数时的事件 此时会响应对应的信息 // 需要调用校验接口进行数据校验，校验成功需要改变组件的检验状态 checkStatus // 此处有三种状态 'waiting', 'success', 'error' success // 成功后的回调 checkStatusChange // 响应校验状态的改变并保存 ``` ### 暴露的类型 > 参考源码 src/@types ### 参数 ```js // 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 ``` --- _Source: https://npm.io/package/cmsk-fontend-libs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._