import{c as t,o as e,A as o}from"./vendor.91b30fe3.js";const n={class:"markdown-body"},a=o('<h1>ShortPassword 短密码组件</h1><h3>介绍</h3><p>XXXXXX</p><h3>安装</h3><pre><code class="language-javascript">import { createApp } from &#39;vue&#39;;\nimport { ShortPassword } from &#39;@nutui/nutui&#39;;\n\nconst app = createApp();\napp.use(ShortPassword);\n\n</code></pre><h2>代码示例</h2><h3>基础用法</h3><pre><code class="language-html">&lt;div @click=&quot;switchActionSheet(&#39;dialogShow&#39;)&quot; &gt;点击出现输出框&lt;/div&gt;\n&lt;nut-shortpassword \n    v-model:value=&quot;state.value&quot; \n    v-model:is-visible=&quot;state.dialogShow&quot;\n    &gt;\n&lt;/nut-shortpassword&gt;\n</code></pre><pre><code class="language-javascript">  setup() {\n    const state = reactive({\n      dialogShow: false,\n      value: &#39;&#39;,\n    });\n    return {\n      state,\n    };\n  },\n// ...\n</code></pre><h3>展示按钮</h3><pre><code class="language-html">&lt;div @click=&quot;switchActionSheet(&#39;dialogShow&#39;)&quot; &gt;点击出现输出框&lt;/div&gt;\n&lt;nut-shortpassword \n    v-model:value=&quot;state.value&quot; \n    v-model:is-visible=&quot;state.dialogShow&quot;\n    :no-button=&quot;false&quot;\n    @sureClick=&#39;sureClick&#39;\n    &gt;\n&lt;/nut-shortpassword&gt;\n</code></pre><pre><code class="language-javascript">setup() {\n    const state = reactive({\n      dialogShow: false,\n      value: &#39;&#39;,\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">&lt;div @click=&quot;switchActionSheet(&#39;dialogShow&#39;)&quot; &gt;点击出现输出框&lt;/div&gt;\n&lt;nut-shortpassword \n    v-model:value=&quot;state.value&quot; \n    v-model:is-visible=&quot;state.dialogShow&quot;\n    :length=5\n    &gt;\n&lt;/nut-shortpassword&gt;\n</code></pre><pre><code class="language-javascript">setup() {\n    const state = reactive({\n      dialogShow: false,\n      value: &#39;&#39;,\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">&lt;div @click=&quot;switchActionSheet(&#39;dialogShow&#39;)&quot; &gt;点击出现输出框&lt;/div&gt;\n&lt;nut-shortpassword \n    v-model:value=&quot;state.value&quot; \n    v-model:is-visible=&quot;state.dialogShow&quot;\n    :errorMsg = state.errorMsg\n    &gt;\n&lt;/nut-shortpassword&gt;\n</code></pre><pre><code class="language-javascript">setup() {\n    const state = reactive({\n      dialogShow: false,\n      value: &#39;&#39;,\n      errorMsg:&#39;&#39;\n    });\n    function switchActionSheet() {\n        state.dialogShow = !state.dialogShow\n    }\n    watch(\n      () =&gt; state.value3,\n      val =&gt; {\n        if (val.length == 6) {\n          state.errorMsg = &#39;请输入正确密码&#39;\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>isVisible</td><td>是否展示短密码框</td><td>Booble</td><td>false</td></tr><tr><td>value</td><td>密码值</td><td>string</td><td>‘’</td></tr><tr><td>noButton</td><td>是否隐藏底部按钮</td><td>Booble</td><td>true</td></tr><tr><td>length</td><td>密码长度</td><td>string</td><td></td></tr><tr><td>errorMsg</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>sureClick</td><td>点击确实时触发事件</td><td>–</td></tr></tbody></table>',22),s={expose:[],setup:o=>(o,s)=>(e(),t("div",n,[a]))};export default s;