| 1 |
- import{c as t,o as e,A as o}from"./vendor.91b30fe3.js";const n={class:"markdown-body"},d=o('<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"><div @click="switchActionSheet('dialogShow')" >点击出现输出框</div>\n<nut-shortpassword \n v-model:value="state.value" \n v-model:is-visible="state.dialogShow"\n >\n</nut-shortpassword>\n</code></pre><pre><code class="language-javascript"> setup() {\n const state = reactive({\n dialogShow: false,\n value: '',\n });\n return {\n state,\n };\n },\n// ...\n</code></pre><h3>展示按钮</h3><pre><code class="language-html"><div @click="switchActionSheet('dialogShow')" >点击出现输出框</div>\n<nut-shortpassword \n v-model:value="state.value" \n v-model:is-visible="state.dialogShow"\n :no-button="false"\n @sure-click='sureClick'\n >\n</nut-shortpassword>\n</code></pre><pre><code class="language-javascript">setup() {\n const state = reactive({\n dialogShow: false,\n value: '',\n });\n function switchActionSheet() {\n state.dialogShow = !state.dialogShow\n }\n function sureClick() {\n state.dialogShow = false\n }\n return {\n state,\n switchActionSheet,\n sureClick\n };\n },\n \n</code></pre><h3>自定义长度</h3><pre><code class="language-html"><div @click="switchActionSheet('dialogShow')" >点击出现输出框</div>\n<nut-shortpassword \n v-model:value="state.value" \n v-model:is-visible="state.dialogShow"\n :length=5\n >\n</nut-shortpassword>\n</code></pre><pre><code class="language-javascript">setup() {\n const state = reactive({\n dialogShow: false,\n value: '',\n });\n function switchActionSheet() {\n state.dialogShow = !state.dialogShow\n }\n return {\n state,\n switchActionSheet\n };\n },\n</code></pre><h3>出现提示信息</h3><pre><code class="language-html"><div @click="switchActionSheet('dialogShow')" >点击出现输出框</div>\n<nut-shortpassword \n v-model:value="state.value" \n v-model:is-visible="state.dialogShow"\n :error-msg = state.errorMsg\n >\n</nut-shortpassword>\n</code></pre><pre><code class="language-javascript">setup() {\n const state = reactive({\n dialogShow: false,\n value: '',\n errorMsg:''\n });\n function switchActionSheet() {\n state.dialogShow = !state.dialogShow\n }\n watch(\n () => state.value3,\n val => {\n if (val.length == 6) {\n state.errorMsg = '请输入正确密码'\n }\n }\n );\n return {\n state,\n switchActionSheet\n };\n },\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>Boolean</td><td>‘请输入密码’</td></tr><tr><td>is-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>no-button</td><td>是否隐藏底部按钮</td><td>Boolean</td><td>true</td></tr><tr><td>length</td><td>密码长度，取值为4，5，6</td><td>string</td><td></td></tr><tr><td>error-msg</td><td>错误信息提示</td><td>string</td><td>‘’</td></tr><tr><td>show-password-tips</td><td>忘记密码提示信息</td><td>string</td><td>‘忘记密码’</td></tr><tr><td>link</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>input</td><td>输入密码时触发事件</td><td>–</td></tr><tr><td>sure-click</td><td>点击确实时触发事件</td><td>value</td></tr><tr><td>complete</td><td>输入完成的回调</td><td>value</td></tr></tbody></table>',22),a={expose:[],setup:o=>(o,a)=>(e(),t("div",n,[d]))};export default a;
|
