介绍

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

代码演示

基础使用

默认可以输入 6 个字符。

vue ts

<template>
  <s-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 js

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

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

下划线类型

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

vue ts

<template>
  <s-password-input v-model="value" type="underlined" @change="onChange" />
</template>

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

const value = ref('')

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

vue js

<template>
  <s-password-input v-model="value" type="underlined" @change="onChange" />
</template>

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

间距

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

vue ts

<template>
  <s-password-input v-model="value" gap="0" @change="onChange" />
</template>

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

const value = ref('')

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

vue js

<template>
  <s-password-input v-model="value" gap="0" @change="onChange" />
</template>

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

明文显示

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

vue ts

<template>
  <s-password-input v-model="value" plain-text @change="onChange" />
</template>

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

const value = ref('')

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

vue js

<template>
  <s-password-input v-model="value" plain-text @change="onChange" />
</template>

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

只读和禁用

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

<template>
  <doc-title>只读</doc-title>
  <s-password-input model-value="123456" readonly />
  <s-password-input model-value="123456" plain-text readonly style="margin-top: 10px" />

  <doc-title>禁用</doc-title>
  <s-password-input model-value="123456" disabled />
  <s-password-input model-value="123456" plain-text disabled style="margin-top: 10px" />
</template>

使用自定义键盘

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

vue ts

<template>
  <s-password-input
    v-model="value"
    type="underlined"
    custom-keyboard
    focused
    style="margin-bottom: 10px"
  />
  <s-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 js

<template>
  <s-password-input
    v-model="value"
    type="underlined"
    custom-keyboard
    focused
    style="margin-bottom: 10px"
  />
  <s-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

属性	描述	类型	默认值
model-value	密码输入框值	string	-
length	密码长度	number	6
type	密码输入框类型	'bordered' | 'underlined'	'border'
gap	密码输入框项间距	number | string	-
plain-text	是否明文显示	boolean	false
focused	是否获取焦点	boolean	false
custom-keyboard	是否使用自定义键盘	boolean	false
disabled	禁用状态	boolean	false
readonly	只读状态	boolean	false
validate-event	是否触发表单验证	boolean	true

PasswordInputEmits

事件	描述	类型
update:modelValue	输入框值改变时触发	(value: string) => void
change	输入框值改变时触发	(value: string) => void
update:focused	输入框聚焦/失焦时触发	(focused: boolean) => void
focus	输入框聚焦时触发	(event: FocusEvent) => void
blur	输入框失焦时触发	(event: FocusEvent) => void