| 1 |
- import{c as t,o as e,A as d}from"./vendor.80bf15c7.js";const o={class:"markdown-body"},n=d('<h1>ShortPassword 短密码组件</h1><h3>介绍</h3><p>短密码输入框，可用于输入密码、短信验证码等</p><h3>安装</h3><pre><code class="language-javascript">import { createApp } from 'vue';\nimport { ShortPassword } from '@nutui/nutui';\n\nconst app = createApp();\napp.use(ShortPassword);\n\n</code></pre><h2>代码示例</h2><h3>公用片段</h3><pre><code class="language-html"><nut-shortpassword\n v-model:value="state.value"\n v-model:visible="state.visible"\n :no-button="state.noButton"\n :length="state.length"\n :error-msg="state.errorMsg"\n @change="methods.onChange"\n @complete="methods.onComplete"\n @ok="methods.onOk"\n @tips="methods.onTips">\n</nut-shortpassword>\n</code></pre><pre><code class="language-javascript">import { reactive, getCurrentInstance } from 'vue';\nsetup() {\n let { ctx } = getCurrentInstance();\n const state = reactive({\n visible: false,\n noButton: true,\n value: '',\n errorMsg: '',\n length: 6\n });\n const methods = {\n onChange(val: string) {\n val && ctx.$toast.text(val);\n },\n onOk(val: string) {\n val && ctx.$toast.text(val);\n state.visible = false;\n },\n onComplete() {\n \n },\n onTips() {\n ctx.$toast.text('执行忘记密码逻辑');\n }\n };\n return {\n state,\n methods\n };\n}\n\n</code></pre><h3>基础用法</h3><pre><code class="language-html"><nut-cell title="基础用法" is-link @click="state.visible = true;"></nut-cell>\n</code></pre><h3>显示按钮组</h3><pre><code class="language-html"><nut-cell title="显示按钮组" is-link @click="state.visible = true;state.noButton = false;"></nut-cell>\n</code></pre><h3>自定义密码长度4</h3><pre><code class="language-html"><nut-cell title="自定义密码长度4" is-link @click="state.visible = true;state.length = 4;"></nut-cell>\n</code></pre><h3>忘记密码提示语事件回调</h3><pre><code class="language-html"><nut-cell title="忘记密码提示语事件回调" is-link @click="state.visible = true;"></nut-cell>\n</code></pre><h3>错误提示语</h3><pre><code class="language-html"><nut-cell title="错误提示语" is-link @click="state.visible = true;state.errorMsg = '请输入正确密码';"></nut-cell>\n</code></pre><h3>Prop</h3><table><thead><tr><th>字段</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>title</td><td>标题</td><td>String</td><td>请输入密码</td></tr><tr><td>desc</td><td>密码框描述</td><td>String</td><td>您使用了虚拟资产，请进行验证</td></tr><tr><td>tips</td><td>提示语</td><td>String</td><td>忘记密码</td></tr><tr><td>visible</td><td>是否展示短密码框</td><td>Boolean</td><td>false</td></tr><tr><td>value</td><td>密码初始值</td><td>String</td><td>‘’</td></tr><tr><td>close-on-click-overlay</td><td>是否点击遮罩关闭</td><td>Boolean</td><td>true</td></tr><tr><td>no-button</td><td>是否隐藏底部按钮</td><td>Boolean</td><td>true</td></tr><tr><td>length</td><td>密码长度，取值为4~6</td><td>String</td><td></td></tr><tr><td>error-msg</td><td>错误信息提示</td><td>String</td><td>‘’</td></tr></tbody></table><h3>Event</h3><table><thead><tr><th>事件名称</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>change</td><td>输入密码时触发事件</td><td>–</td></tr><tr><td>ok</td><td>点击确实时触发事件</td><td>value</td></tr><tr><td>cancel</td><td>点击取消时触发事件</td><td>value</td></tr><tr><td>close</td><td>点击关闭图标时触发事件</td><td>value</td></tr><tr><td>complete</td><td>输入完成的回调</td><td>value</td></tr></tbody></table>',23),l={expose:[],setup:d=>(d,l)=>(e(),t("div",o,[n]))};export default l;
|
