# vue-message-code

> vue短信验证码组件

Latest version **0.0.5** (published 2023-05-20) · 0 weekly downloads

## Install

```sh
npm install vue-message-code
pnpm add vue-message-code
yarn add vue-message-code
bun add vue-message-code
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2023-05-20 |
| First published | 2021-09-27 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 395.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | shenxiaobu |
| Maintainers | shenxiaobu |
| Keywords | code, message, 短信验证码组件, 短信验证码, 验证码 |

## Links

- npm: https://www.npmjs.com/package/vue-message-code
- npm.io page: https://npm.io/package/vue-message-code

## Alternatives

- [flatbuffers](https://npm.io/package/flatbuffers.md) — 6.0M weekly downloads
- [jwt-simple](https://npm.io/package/jwt-simple.md) — 259.5K weekly downloads
- [@exodus/patch-broken-hermes-typed-arrays](https://npm.io/package/@exodus/patch-broken-hermes-typed-arrays.md) — 28.5K weekly downloads
- [@native-to-anchor/buffer-layout](https://npm.io/package/@native-to-anchor/buffer-layout.md) — 12.2K weekly downloads
- [binary-parser-encoder](https://npm.io/package/binary-parser-encoder.md) — 5.3K weekly downloads

## Recent versions

- 0.0.5 (latest) — 2023-05-20
- 0.0.4 — 2022-03-02
- 0.0.3 — 2021-12-24
- 0.0.2 — 2021-10-21
- 0.0.1 — 2021-09-27

## README

# vue-message-code组件使用

## 安装

```shell
npm install -S vue-message-code
```

## 引入

```js
import { vueMessageCode } from "vue-message-code"
Vue.use(vueMessageCode)
```

或者

```js
import vueMessageCode from "vue-message-code"
Vue.use(vueMessageCode)
```

## 使用

### 短信验证码

```vue
<vue-message-code :getCodeApi="getCodeApi" :validateForm="validateForm"></vue-message-code>
```

```js
    //获取短信验证码
    getCodeApi() {
      this.getCodeForm.phone = this.editForm.phone
      return new Promise((resolve, reject) => {
        commonApi.req(this.getCodeForm).then(data => {
          resolve(data)
        }).catch(err => {
          reject(err)
        })
      })
    },
    //校验手机号
    validateForm() {
      return new Promise(resolve => {
        //这边是element的表单校验
        this.$refs.editForm.validateField("phone", data => {
          if (!data) {
            resolve({ result: true, msg: "校验通过" })
          } else {
            resolve({ result: false, msg: data })
          }
        })
      })
    },
```

#### 配置参数

|               字段                |                        说明                        |  类型   |     默认值      |
| :-------------------------------: | :------------------------------------------------: | :-----: | :-------------: |
|            getCodeApi             |                 获取短信验证码接口                 | Promise |     promise     |
|           validateForm            |                     校验手机号                     | Promise |     Promise     |
|               time                |                     倒计时时间                     | Number  |       60        |
|           isReloadReset           |        刷新浏览器是否可以立即再次获取验证码        | Boolean |      false      |
| messageCodeKey（0.0.2版本及以上） | 添加验证码组件key，不同key值的组件等待时间互不干涉 | String  | messageCodeTime |
|  storageType（0.0.3版本及以上）   | 存入浏览器缓存类型   localStorage   sessionStorage | String  |  localStorage   |
|    beginMsg（0.0.3版本及以上）    |          点击获取短信验证码前 的按钮文字           | String  | 获取短信验证码  |
|  countDownMsg（0.0.3版本及以上）  |       点击后文字提示  ?会被替代为倒计时时间        | String  |    ? 秒后可重发     |

微信公众号 爆米花小布 了解更多前端经验

#### 

## 更新日志

0.0.5 【优化】使用import导入， 新增默认样式

---
_Source: https://npm.io/package/vue-message-code · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._