Vue.JS开源:基于Vue2.0的移动端验证码输入组件
ikmk1644
8年前
<h2>vue-input-code</h2> <h2>基于Vue2.0的移动端验证码输入组件.</h2> <p style="text-align:center"><img src="https://simg.open-open.com/show/7432f37b89bb514680fffee370c7c6e9.png"></p> <h2>功能预览</h2> <ul> <li>输入回调</li> <li>完成回调</li> <li>自定义验证码个数</li> <li>样式可控</li> </ul> <h2>支持</h2> <p>支持 Vue.js 2.0+.</p> <h2>安装和使用</h2> <pre> <code class="language-javascript">npm install vue-input-code --save</code></pre> <ul> <li>作为全局组件使用</li> </ul> <pre> <code class="language-javascript">//在项目入口文件 import Vue from 'vue' import VueInputCode from 'vue-input-code' Vue.component('VueInputCode', VueInputCode)</code></pre> <ul> <li>作为局部组件</li> </ul> <pre> <code class="language-javascript">//在某个组件中 import VueInputCode from 'vue-input-code' export default { components: { VueInputCode } }</code></pre> <p>HTML中使用:</p> <pre> <code class="language-javascript"><vue-input-code span-size="20px" type="number" :number="5" height="50px" span-color="#f35252" input-color="#3498db" input-size="24px" :code="code" :getinput="getInput" :success="success"></vue-input-code></code></pre> <h2>API</h2> <h3>Props</h3> <table> <thead> <tr> <th>参数</th> <th>类型</th> <th>说明</th> <th>可选值</th> <th>默认值</th> </tr> </thead> <tbody> <tr> <td>code</td> <td>数组</td> <td>用户输入的验证码数组</td> <td>—</td> <td>—</td> </tr> <tr> <td>type</td> <td>字符串</td> <td>用户输入类型</td> <td>number,text</td> <td>number</td> </tr> <tr> <td>getinput</td> <td>函数</td> <td>用户每次输入后的回调函数,接受一个验证码字符串</td> <td>—</td> <td>—</td> </tr> <tr> <td>success</td> <td>函数</td> <td>用户输入完成后的回调函数,接受一个验证码字符串</td> <td>—</td> <td>—</td> </tr> <tr> <td>span-size</td> <td>字符串</td> <td>输入后的字体显示大小</td> <td>—</td> <td>20px</td> </tr> <tr> <td>span-color</td> <td>字符串</td> <td>输入后的字体显示颜色</td> <td>—</td> <td>#f35252</td> </tr> <tr> <td>input-size</td> <td>字符串</td> <td>输入框的字体显示大小</td> <td>—</td> <td>20px</td> </tr> <tr> <td>input-color</td> <td>字符串</td> <td>输入框的字体显示颜色</td> <td>—</td> <td>#000</td> </tr> <tr> <td>number</td> <td>数字</td> <td>验证码个数</td> <td>—</td> <td>6</td> </tr> <tr> <td>height</td> <td>字符串</td> <td>整个框的显示高度</td> <td>—</td> <td>60px</td> </tr> </tbody> </table> <p> </p> <p> </p> <p> </p>