hyf_send_code
v1.2.1
Published
本项目基于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 sen
Downloads
11
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|