ShortPassword 短密码

介绍

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

安装

基础用法

<template>
  <nut-short-password
    v-model="value"
    v-model:visible="visible"
    @focus="keyboardVisible = !keyboardVisible"
    @close="keyboardVisible = false"
  ></nut-short-password>

  <nut-number-keyboard
    v-model="value"
    v-model:visible="keyboardVisible"
  ></nut-number-keyboard>
</template>

const value = ref("");
const visible = ref(false);
const keyboardVisible = ref(false);

自定义密码长度

<template>
  <nut-short-password
    v-model="value"
    v-model:visible="visible"
    :length="4"
    @focus="keyboardVisible = !keyboardVisible"
    @close="keyboardVisible = false"
    @complete="onComplete"
  ></nut-short-password>

  <nut-number-keyboard
    v-model="value"
    v-model:visible="keyboardVisible"
    :maxlength="4"
  ></nut-number-keyboard>
</template>

const value = ref("");
const visible = ref(false);
const keyboardVisible = ref(false);

function onComplete(val: string) {
  console.log("complete", val);
}

忘记密码提示语事件回调

<template>
  <nut-short-password
    v-model="value"
    v-model:visible="visible"
    @focus="keyboardVisible = !keyboardVisible"
    @close="keyboardVisible = false"
    @tips="onTips"
  ></nut-short-password>

  <nut-number-keyboard
    v-model="value"
    v-model:visible="keyboardVisible"
  ></nut-number-keyboard>
</template>

function onTips() {
  console.log("忘记密码");
}

错误提示语

<template>
  <nut-short-password
    v-model="value"
    v-model:visible="visible"
    :error-msg="errorMsg"
    @focus="keyboardVisible = !keyboardVisible"
    @close="keyboardVisible = false"
    @complete="onComplete"
  ></nut-short-password>

  <nut-number-keyboard
    v-model="value"
    v-model:visible="keyboardVisible"
  ></nut-number-keyboard>
</template>

const errorMsg = ref("");

function onComplete() {
  errorMsg.value = "密码错误！";
}

API

Props

参数	说明	类型	可选值	默认值
v-model	密码初始值	string	-
v-model:visible	是否展示短密码框	boolean	-	false
title	标题	string	-	请输入密码
desc	密码框描述	string	-	您使用了虚拟资产，请进行验证
tips	提示语	string	-	忘记密码
close-on-click-overlay	是否点击遮罩关闭	boolean	-	true
length	密码长度（取值范围：4 ~ 6）	string / number	-	6
error-msg	错误信息提示	string	-	-

Events

事件名	说明	类型
complete	输入完成的回调	(value: string) => void
close	点击关闭图标或者遮罩时触发事件	() => void
focus	输入框聚焦	() => void
tips	点击提示文字	() => void

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称	默认值
--nut-shortpassword-background-color	rgba(245, 245, 245, 1)
--nut-shortpassword-border-color	#ddd
--nut-shortpassword-error	var(--nut-primary-color)
--nut-shortpassword-forget	rgba(128, 128, 128, 1)