{"id":20578175,"url":"https://github.com/en777/vue-get-code","last_synced_at":"2026-05-16T06:36:05.369Z","repository":{"id":57396046,"uuid":"433647950","full_name":"En777/vue-get-code","owner":"En777","description":"获取验证码的 vue 组件（封装了：发送验证码、倒计时、倒计时完成后可以重新发送……）。","archived":false,"fork":false,"pushed_at":"2021-12-07T02:18:05.000Z","size":1085,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-16T11:34:47.583Z","etag":null,"topics":["captcha","email-verification","sms-code","sms-verification","sms-verifier","vue","vue-component","vue-components"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/En777.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-12-01T01:50:48.000Z","updated_at":"2023-12-19T08:48:44.000Z","dependencies_parsed_at":"2022-09-18T12:03:38.164Z","dependency_job_id":null,"html_url":"https://github.com/En777/vue-get-code","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/En777%2Fvue-get-code","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/En777%2Fvue-get-code/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/En777%2Fvue-get-code/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/En777%2Fvue-get-code/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/En777","download_url":"https://codeload.github.com/En777/vue-get-code/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242200696,"owners_count":20088486,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["captcha","email-verification","sms-code","sms-verification","sms-verifier","vue","vue-component","vue-components"],"created_at":"2024-11-16T06:11:18.725Z","updated_at":"2026-05-16T06:36:05.333Z","avatar_url":"https://github.com/En777.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-get-code (获取短信验证码的 vue 组件)\n\n[![NPM Version](https://badge.fury.io/js/vue-get-code.svg)](https://www.npmjs.com/package/vue-get-code)\n[![NPM License](https://badgen.net/npm/license/vue-get-code)](https://github.com/En777/vue-get-code/blob/main/LICENSE)\n[![NPM Download](https://badgen.net/npm/dm/vue-get-code)](https://www.npmjs.com/package/vue-get-code)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/En777/vue-get-code/pulls)\n\n## Table of Contents 目录\n\n- [Introduction](#introduction)\n- [Features](#features)\n- [Install](#install)\n- [Usage](#usage)\n- [Links](#links)\n- [Contributing](#contributing)\n- [Contributors](#contributors)\n- [License](#license)\n\n## Introduction 介绍\n\nvue-get-code 封装了发送验证码、倒计时，倒计时完成后可以重新发送……\n\n[demo/example](https://en777.github.io/vue-get-code/#/Demo/basic)\n\n[doc/文档](https://en777.github.io/vue-get-code/#/Components?id=vuegetcode)\n\n使用很简单，支持灵活的配置，支持复杂的场景。\n获取短信验证码、获取邮件验证码，都可以使用这个组件。\n\n快速使用：\n\n```vue\n\u003ctemplate\u003e\n  \u003cform\u003e\n    \u003cinput placeholder=\"phone\" value=\"130xxxx\" /\u003e\n    \u003cvue-get-code :getCode=\"getCode\"\u003e\u003c/vue-get-code\u003e\n  \u003c/form\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport VueGetCode from 'vue-get-code'\n\nexport default {\n  components: {\n    VueGetCode\n  },\n  methods: {\n    // 调用获取验证码的接口，此函数请返回 Promise 对象\n    getCode() {\n      let mockApi = 'https://cdn.jsdelivr.net/npm/vue@2/package.json'\n      return fetch(mockApi)\n    }\n  }\n}\n\u003c/script\u003e\n\n\u003cstyle\u003e\n.vue-get-code {\n  color: #1092ed;\n  cursor: pointer;\n}\n.vue-get-code.enable-countdown {\n  cursor: not-allowed;\n}\n\u003c/style\u003e\n```\n\n## Features 特点\n\nvue-get-code 是一个非常灵活的获取短信验证码组件。\n\n支持灵活的配置：\n\n- 倒计时的秒数，默认 60 秒，可按需设置\n- 发送验证码需要 ajax 调用接口，可以在 getCode() 函数中实现，过程由开发者实现，非常灵活，返回一个 Promise 对象即可，组件会等待函数，成功后会开始倒计时，失败了会结束倒计时。在此函数中，也可以做表单验证，真的非常灵活。\n- 调用者可以控制组件是否禁用\n- 发送验证码前、倒计时、禁用，多个状态都有对应 class，控制样式非常方便\n- 可以定制发验证码之前的文字\n- 可以定制倒计时的文案\n- 倒计时有事件触发(countdownBegin/countdownUpdate/countdownEnd)\n- 获取验证码接口报错有事件触发(getCodeError)\n\n## Install 安装\n\n`npm install vue-get-code`\n\n## Usage 使用\n\n### 修改配置，把倒计时改为 120 秒\n\n```vue\n\u003ctemplate\u003e\n  \u003cform\u003e\n    \u003cinput placeholder=\"phone\" value=\"130xxxx\" /\u003e\n    \u003cvue-get-code :getCode=\"getCode\" :interval=\"120\"\u003e\u003c/vue-get-code\u003e\n  \u003c/form\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  methods: {\n    getCode() {\n      let mockApi = 'https://cdn.jsdelivr.net/npm/vue@2/package.json'\n      return fetch(mockApi)\n    }\n  }\n}\n\u003c/script\u003e\n\n\u003cstyle\u003e\n.vue-get-code {\n  color: #1092ed;\n  cursor: pointer;\n}\n.vue-get-code.enable-countdown {\n  cursor: not-allowed;\n}\n\u003c/style\u003e\n```\n\nvue-get-code 组件的 props 参数\n\n```\n// 发送验证码的 ajax 实现，函数请返回 Promise 对象\ngetCode: {\n  required: true,\n  type: Function\n},\n// 倒计时的时长，单位：秒\ninterval: {\n  default: 60,\n  type: Number\n},\n// 禁用，禁止点击\ndisable: {\n  default: false,\n  type: Boolean\n}\n```\n\nvue-get-code 组件的 event 事件\n\n```\ncountdownBegin\ncountdownUpdate\ncountdownEnd\ngetCodeError\n```\n\n### 修改默认文案，如果已经获取过一次验证码，显示“重新获取”\n\n```vue\n\u003ctemplate\u003e\n  \u003cform\u003e\n    \u003cinput placeholder=\"phone\" value=\"130xxxx\" /\u003e\n    \u003cvue-get-code :getCode=\"getCode\" :interval=\"3\"\u003e\n      \u003ctemplate v-slot:default=\"child\"\u003e\n        {{ child.data.count \u003c= 0 ? '获取验证码' : '重新获取' }}\n      \u003c/template\u003e\n    \u003c/vue-get-code\u003e\n  \u003c/form\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  data() {\n    return {}\n  },\n  methods: {\n    getCode() {\n      let mockApi = 'https://cdn.jsdelivr.net/npm/vue@2/package.json'\n      return fetch(mockApi)\n    }\n  }\n}\n\u003c/script\u003e\n\n\u003cstyle\u003e\n.vue-get-code {\n  color: #1092ed;\n  cursor: pointer;\n}\n.vue-get-code.enable-countdown {\n  cursor: not-allowed;\n}\n\u003c/style\u003e\n```\n\n### 高级：配置默认文字、倒计时文字、表单验证与获取验证码结合、event 事件\n\n```vue\n\u003ctemplate\u003e\n  \u003cform\u003e\n    \u003cinput v-model=\"form.phone\" placeholder=\"phone\" /\u003e\n\n    \u003cvue-get-code\n      :getCode=\"getCode\"\n      :interval=\"5\"\n      :disable=\"!form.phone\"\n      @countdownBegin=\"log('begin', arguments)\"\n      @countdownUpdate=\"log('update', arguments)\"\n      @countdownEnd=\"log('end', arguments)\"\n    \u003e\n      \u003ctemplate v-slot:default\n        \u003e获取验证码(输入手机后才能点击获取验证码)\u003c/template\n      \u003e\n      \u003ctemplate v-slot:countdown=\"child\"\u003e\n        请等待{{ child.data.interval - child.data.seconds }}秒\n      \u003c/template\u003e\n    \u003c/vue-get-code\u003e\n  \u003c/form\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  data() {\n    return {\n      form: {\n        phone: ''\n      }\n    }\n  },\n  methods: {\n    getCode() {\n      if (this.form.phone.length \u003c 7) {\n        alert('请填写正确的手机号码')\n        throw '请填写正确的手机号码' // 抛出错误，中断 Promise chain\n      }\n\n      let mockApi = 'https://cdn.jsdelivr.net/npm/vue@2/package.json'\n      return fetch(mockApi)\n    },\n    log() {\n      console.log(JSON.stringify(arguments))\n    }\n  }\n}\n\u003c/script\u003e\n\n\u003cstyle\u003e\n.vue-get-code {\n  color: #1092ed;\n  cursor: pointer;\n}\n.vue-get-code.disable {\n  color: gray;\n  cursor: not-allowed;\n}\n.vue-get-code.enable-countdown {\n  cursor: not-allowed;\n}\n\u003c/style\u003e\n```\n\n## Links\n\n- [docs](https://En777.github.io/vue-get-code/)\n\n## Contributing 参与开发贡献\n\n工程基于 https://github.com/FEMessage/vue-sfc-cli 创建的。\n\n简单使用示例：\n\n```\n# Install dependency\nyarn\n\n# Develop component\nyarn dev\n\n# Build\nyarn build\n\n# Ready to publish!\n# Or use `npm publish`\nyarn publish\n```\n\nFor those who are interested in contributing to this project, such as:\n\n- report a bug\n- request new feature\n- fix a bug\n- implement a new feature\n\nPlease refer to our [contributing guide](https://github.com/FEMessage/.github/blob/main/CONTRIBUTING.md).\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore --\u003e\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n## License\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fen777%2Fvue-get-code","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fen777%2Fvue-get-code","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fen777%2Fvue-get-code/lists"}