# hyf_send_code

> 本项目基于vue3.0开发的发送验证码功能组件，开发者不在需要关注发送后倒计时的逻辑，只需要关注发送接口就可以了。 # 安装方法 > 1, npm install hyf_send_code # 使用方法 ### 第一种：main.js中使用 ``` import { createApp } from 'vue' import App from './App.vue' import './index.css' import sen

Latest version **1.2.1** (published 2022-01-21) · ISC license · 0 weekly downloads

## Install

```sh
npm install hyf_send_code
pnpm add hyf_send_code
yarn add hyf_send_code
bun add hyf_send_code
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.1 |
| Published | 2022-01-21 |
| First published | 2022-01-21 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 26.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | haoyanfeng |

## Links

- npm: https://www.npmjs.com/package/hyf_send_code
- npm.io page: https://npm.io/package/hyf_send_code

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^3.0.4

## Recent versions

- 1.2.1 (latest) — 2022-01-21
- 1.2.0 — 2022-01-21

## README

# 项目介绍
本项目基于vue3.0开发的发送验证码功能组件，开发者不在需要关注发送后倒计时的逻辑，只需要关注发送接口就可以了。
# 安装方法
> 1, npm install hyf_send_code
# 使用方法
###  第一种：main.js中使用
```
<!-- 例子是：vite搭建的3.0版本的 -->
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import sendCode from 'hyf_send_code'
const app = createApp(App);
app.use(sendCode);
app.mount('#app');
```
然后就可以全局使用了。
###  第二种：各个组件内的使用
```
<script setup>
import verificationCode from 'hyf_send_code';
<template>
  <verificationCode></verificationCode>
</template>
</script>
```
### 第三种：详细的使用，放个例子：入参以及暴露出来的方法
> 第一个例子是全局引入的例子也就是`app.use()`;结合上边的main.js中的使用


```
<script setup>
let send_code_params = {
  button_text: "发送验证码", //这是按钮展示文字，因为后期会变为秒数，所以需要button_prepare_text
  button_prepare_text: "发送验证码", //在变为倒计时之后需要再变回原来的文字
  send_timer_coundown: 10, //倒计时
  selfHeight: '200px', //高度
  selfWidth: '200px', //宽度
  selfColor: '#fff', //字体颜色
  selfBgColor: '#07c160', //背景颜色
  selfBorderColor: '#07c160', //边框颜色
  selfSize: '14px', //边框颜色
  selfBradius: '6px', //边框圆角

}
</script>
<template>
  <div>
    <sendCode
      :public_button_params="send_code_params"
      @interfance_code_send="interfance_children_send"
    ></sendCode>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
      //发送验证码点击事件，在这个方法内调用发送接口
    interfance_children_send() {
      console.log('验证码发送成功');
    }
  }
}
</script>

```
> 第二个例子是按需引入的例子;

```
<script setup>
//这里就是按需引入的路径
import HelloWorld from 'hyf_send_code/src/pages/studyDemo/index';
import sendCode from 'hyf_send_code/src/pages/sendMessage/index';
let message = "你过得好吗";
let send_code_params = {
  button_text: "发送验证码", //这是按钮展示文字，因为后期会变为秒数，所以需要button_prepare_text
  button_prepare_text: "发送验证码", //在变为倒计时之后需要再变回原来的文字
  send_timer_coundown: 10, //倒计时
  selfHeight: '200px', //高度
  selfWidth: '200px', //宽度
  selfColor: '#fff', //字体颜色
  selfBgColor: '#07c160', //背景颜色
  selfBorderColor: '#07c160', //边框颜色
  selfSize: '14px', //边框颜色
  selfBradius: '6px', //边框圆角

}
</script>

<template>
  <div class="test-npm">
    <div>{{ message }}</div>
    <sendCode
      :public_button_params="send_code_params"
      @interfance_code_send="interfance_children_send"
    ></sendCode>
    <HelloWorld msg="自定义组件测试" />
  </div>
</template>
<script>
 export default{
   data(){
     return{

     }
   },
   methods:{
     interfance_children_send(){
       console.log('验证码发送成功');
     }
   }
 }
</script>

```
### 第四步：本步详细介绍参数
|参数|描述|默认值|
|:-|:-:|-:|
|send_timer_coundown|倒计时时长|60s|
|selfHeight|按钮高度|40px|
|selfWidth|按钮宽度|200px|
|selfColor|字体颜色|#fff|
|selfBgColor|按钮背景颜色|#1989fa|
|selfBorderColor|按钮边框颜色|#1989fa|
|selfSize|按钮字体大小|14px|
|selfBradius|边框圆角|6px|
|button_text|按钮展示文字|发送验证码|
|button_prepare_text|按钮展示文字（必传）|发送验证码|

### 第五步：按钮事件


|事件名|描述|
|:-|:-:|
|interfance_code_send|点击发送按钮的事件|

### 第六步：特别注意
> 本组件就跟`vant,element`等的组件库按需加载一个意思，应为组件内的名字是我给定的，所以当你在main.js中无论你取名为啥，最后再使用时都需要使用我注册的名字，就跟`vant`一样的原理。
> 所以本次组件我注册了两个

|组件名|描述|
|:-|:-:|
|sendCode|发送验证码组件|
|HelloWorld|就是一个标题，是我练习注册组件的demo|

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