import{c as t,o as e,A as n}from"./vendor.80bf15c7.js";const o={class:"markdown-body"},d=n('

ShortPassword 短密码组件

介绍

短密码输入框，可用于输入密码、短信验证码等

安装

import { createApp } from 'vue';\nimport { ShortPassword } from '@nutui/nutui';\n\nconst app = createApp();\napp.use(ShortPassword);\n\n

代码示例

公用片段

<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  @on-change="methods.onChange"\n  @on-complete="methods.onComplete"\n  @on-ok="methods.onOk"\n  @on-tips="methods.onTips">\n</nut-shortpassword>\n

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

基础用法

<nut-cell title="基础用法" is-link @click="state.visible = true;"></nut-cell>\n

显示按钮组

<nut-cell title="显示按钮组" is-link @click="state.visible = true;state.noButton = false;"></nut-cell>\n

自定义密码长度4

<nut-cell title="自定义密码长度4" is-link @click="state.visible = true;state.length = 4;"></nut-cell>\n

忘记密码提示语事件回调

<nut-cell title="忘记密码提示语事件回调" is-link @click="state.visible = true;"></nut-cell>\n

错误提示语

<nut-cell title="错误提示语" is-link @click="state.visible = true;state.errorMsg = '请输入正确密码';"></nut-cell>\n

Prop

字段	说明	类型	默认值
title	标题	String	请输入密码
desc	密码框描述	String	您使用了虚拟资产，请进行验证
tips	提示语	String	忘记密码
visible	是否展示短密码框	Boolean	false
value	密码初始值	String	‘’
no-button	是否隐藏底部按钮	Boolean	true
length	密码长度，取值为4~6	String
error-msg	错误信息提示	String	‘’

Event

事件名称	说明	回调参数
change	输入密码时触发事件	–
on-ok	点击确实时触发事件	value
complete	输入完成的回调	value

',23),l={expose:[],setup:n=>(n,l)=>(e(),t("div",o,[d]))};export default l;