代码拉取完成，页面将自动刷新
1,npm install sms-check-code --save
2,import VueSmsCode from 'sms-check-code'
3,vue.use(VueSmsCode)
<sms-check-code
title='请输入验证码'
:code-num='6'
:is-error='isError'
error-color='#D81A1A'
@finish='getSmsCode'
/>
| 事件 | 说明 | 默认 | 类型 |
|---|---|---|---|
| title | 组件标题 | 请输入验证码 | string |
| code-num | 验证码个数 | 6 | number |
| is-error | 验证码是否错误 | false | boolean |
| error-color | 验证码错误时显示的错误颜色 | #D81A1A | string |
| 方法 | 说明 | 默认 | 类型 |
|---|---|---|---|
| finish | 验证码值 | '' | string |
<template>
<div id="app">
<sms-check-code
title='请输入验证码'
:codeNum='6'
:is-error='isError'
error-color='#D81A1A'
@finish='getSmsCode'
/>
{{msg}}
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
isError: false, // 验证码错误
msg: ''
}
},
methods: {
getSmsCode(val) {
this.isError = false
this.msg = val
setTimeout(() => {
this.isError = val !== '888888';
if(val === '888888') {
this.msg = '验证码输入成功'
}
}, 1000)
}
}
}
</script>
<style>
html, body {
padding: 0;
margin: 0;
}
</style>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手