@tanzhenxing/zx-password-input v1.0.1

zx-password-input 密码输入框

带网格的输入框组件，可以用于输入密码、短信验证码等场景，通常与数字键盘组件 (zx-number-keyboard) 配合使用。

特性

• 支持 H5、小程序、App 端。
• 高度可定制，支持自定义长度、格子间距、明暗文切换等。
• 样式基于 Vant PasswordInput，并适配 uniapp 项目。

引入

<template>
  <zx-password-input v-model="password" />
</template>

<script setup>
import { ref } from 'vue';
// import zxPasswordInput from '@/components/zx-password-input/zx-password-input.vue'; // 根据实际路径引入

const password = ref('');
</script>

代码演示

基础用法

搭配数字键盘组件来实现密码输入功能。

<template>
  <zx-password-input v-model="value" :focused="showKeyboard" @focus="showKeyboard = true" />
  <zx-number-keyboard v-model="value" :show="showKeyboard" @blur="showKeyboard = false" />
</template>

<script setup>
import { ref } from 'vue';
const value = ref('');
const showKeyboard = ref(false);
</script>

自定义长度

通过 length 属性来设置密码长度。

<zx-password-input v-model="value" :length="4" />

格子间距

通过 gutter 属性来设置格子之间的间距 (单位 rpx)。

<zx-password-input v-model="value" :gutter="10" />

明文展示

将 mask 设置为 false 可以明文展示输入的内容，适用于短信验证码等场景。

<zx-password-input v-model="value" :mask="false" />

提示信息

通过 info 属性设置提示信息，通过 error-info 属性设置错误提示。

<template>
  <zx-password-input
    v-model="value"
    info="密码为 6 位数字"
    :error-info="errorInfo"
    :focused="showKeyboard"
    @focus="showKeyboard = true"
  />
  <zx-number-keyboard v-model="value" :show="showKeyboard" @blur="showKeyboard = false" />
</template>

<script setup>
import { ref, watch } from 'vue';

const value = ref('');
const errorInfo = ref('');
const showKeyboard = ref(false);

watch(value, (newVal) => {
  if (newVal.length === 6 && newVal !== '123456') {
    errorInfo.value = '密码错误';
  } else {
    errorInfo.value = '';
  }
});
</script>

API

Props

Events

样式变量

组件提供了一些 CSS 变量，可用于自定义样式。你可以在项目的全局样式文件或者页面的 <style> 标签中覆盖这些变量。

注意:

• item-width 默认为 auto，当 gutter 为 0 时，格子会自动均分宽度。如果设置了 gutter，建议同时设置一个明确的 item-width 以获得最佳布局。
• zx-number-keyboard 是一个假设存在的数字键盘组件，你需要确保项目中已经有此组件或替换为其他可用的键盘组件。