介绍

用于输入密码、验证码等场景可结合数字键盘组件或原生键盘使用。

引入

import PasswordInput from 'sard-uniapp/components/password-input/password-input.vue'

代码演示

基础使用

默认可以输入 6 个字符。

vue lang="ts"

<template>
  <sar-password-input v-model="value" @change="onChange" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')

const onChange = (value: any) => {
  console.log('change', value)
}
</script>

vue lang="js"

<template>
  <sar-password-input v-model="value" @change="onChange" />
</template>

<script setup lang="js">
import { ref } from "vue";
const value = ref("");
const onChange = (value2) => {
  console.log("change", value2);
};
</script>

下划线类型

type 属性可以设置为 underline 显示为下划线类型。

<template>
  <sar-password-input type="underline" />
</template>

间距

通过 gap 属性来设置格子之间的间距。

<template>
  <sar-password-input gap="0" />
</template>

明文显示

设置 plainText 属性可以明文展示输入的内容，适用于短信验证码等场景。

<template>
  <sar-password-input plain-text />
</template>

只读和禁用

只读和禁用后不可以操作。

<template>
  <doc-title>只读</doc-title>
  <sar-password-input model-value="123456" readonly />
  <sar-password-input
    model-value="123456"
    plainText
    readonly
    root-style="margin-top: 20rpx"
  />

  <doc-title>禁用</doc-title>
  <sar-password-input model-value="123456" disabled />
  <sar-password-input
    model-value="123456"
    plainText
    disabled
    root-style="margin-top: 20rpx"
  />
</template>

使用自定义键盘

设置 customKeyboard 属性可以使用自定义键盘输入，如果 focused 属性为真则会显示聚焦状态。

vue lang="ts"

<template>
  <sar-password-input
    v-model="value"
    type="underline"
    customKeyboard
    focused
    root-style="margin-bottom: 20rpx"
  />
  <sar-keyboard
    @input="(v: string) => (value = (value + v).slice(0, 6))"
    @delete="value = value.slice(0, -1)"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

vue lang="js"

<template>
  <sar-password-input
    v-model="value"
    type="underline"
    customKeyboard
    focused
    root-style="margin-bottom: 20rpx"
  />
  <sar-keyboard
    @input="(v: string) => (value = (value + v).slice(0, 6))"
    @delete="value = value.slice(0, -1)"
  />
</template>

<script setup lang="js">
import { ref } from "vue";
const value = ref("");
</script>

API

PasswordInputProps

属性	描述	类型	默认值
root-class	组件根元素类名	string	-
root-style	组件根元素样式	StyleValue	-
model-value (v-model)	密码输入框值	string	-
length	密码长度	number	6
type	密码输入框类型	'border' | 'underline'	'border'
gap	密码输入框项间距	number | string	-
plain-text	是否明文显示	boolean	false
focused (v-model)	是否获取焦点	boolean	false
custom-keyboard	是否使用自定义键盘	boolean	false
disabled	禁用状态	boolean	false
readonly	只读状态	boolean	false
validate-event	是否触发表单验证	boolean	true

PasswordInputEmits

事件	描述	类型
update:model-value	输入框值改变时触发	(value: string) => void
change 1.9.2+	输入框值改变时触发	(value: string) => void
updat:focused	输入框聚焦/失焦时触发	(focused: boolean) => void

主题定制

CSS 变量

page,
.sar-portal {
  --sar-password-input-gap: 20rpx;
  --sar-password-input-border-color: var(--sar-border-color);
  --sar-password-input-border-radius: var(--sar-rounded);
  --sar-password-input-active-border-color: var(--sar-primary);

  --sar-password-input-height: 96rpx;
  --sar-password-input-ciphertext-size: 20rpx;
  --sar-password-input-ciphertext-bg: var(--sar-body-color);

  --sar-password-input-plaintext-font-size: 40rpx;

  --sar-password-input-cursor-width: 1px;
  --sar-password-input-cursor-height: 40rpx;
  --sar-password-input-cursor-color: var(--sar-body-color);
  --sar-password-input-cursor-animation-duration: 1s;
}