Vue.JS开源:基于Vue2.0的移动端验证码输入组件

ikmk1644 3年前
   <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>