hyf_send_code

项目介绍

本项目基于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