hbis-password-input 密码输入弹窗组件

简介

hbis-password-input 是一个带数字键盘的密码输入弹窗组件，支持自定义数字键盘、设置是否明文显示、输入完成后自动执行完成回调等功能。适用于需要密码输入的场景，如支付密码、解锁密码等。

特性

• 数字键盘输入：内置数字键盘，支持点击输入
• 自定义键盘：支持自定义数字键盘布局
• 明文/密文切换：可设置是否明文显示密码
• 自动完成回调：输入达到最大长度时自动触发完成回调
• 自定义标题：可设置弹窗标题，默认"请输入密码"
• 自定义确认按钮：可设置确认按钮文本，默认"确定"
• 密码长度控制：可设置密码最大长度，默认6位
• 响应式设计：适配不同屏幕尺寸
• 动画效果：弹窗显示和隐藏时有平滑的动画效果

安装

作为组件库的一部分安装

pnpm add @hbis-uni/components

单独安装

pnpm add @hbis-uni/hbis-password-input

使用方法

基本使用

<template>
  <div class="demo-container">
    <button @click="showPasswordDialog = true">打开密码输入弹窗</button>
    
    <hbis-password-input
      v-model:visible="showPasswordDialog"
      @complete="handlePasswordComplete"
      @confirm="handlePasswordConfirm"
      @close="handlePasswordClose"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { hbisPasswordInput } from '@hbis-uni/components';

const showPasswordDialog = ref(false);

// 密码输入完成回调
const handlePasswordComplete = (password) => {
  console.log('密码输入完成:', password);
  // 这里可以处理密码验证逻辑
  showPasswordDialog.value = false;
};

// 确认按钮点击回调
const handlePasswordConfirm = (password) => {
  console.log('确认密码:', password);
  // 这里可以处理密码验证逻辑
  showPasswordDialog.value = false;
};

// 关闭弹窗回调
const handlePasswordClose = () => {
  console.log('弹窗关闭');
  showPasswordDialog.value = false;
};
</script>

自定义配置

<template>
  <div class="demo-container">
    <button @click="showCustomPasswordDialog = true">打开自定义密码输入弹窗</button>
    
    <hbis-password-input
      v-model:visible="showCustomPasswordDialog"
      title="请输入支付密码"
      confirm-text="确认支付"
      :max-length="4"
      :show-password="true"
      :keyboard-layout="customKeyboard"
      @complete="handleCustomPasswordComplete"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { hbisPasswordInput } from '@hbis-uni/components';

const showCustomPasswordDialog = ref(false);

// 自定义键盘布局
const customKeyboard = [
  ['7', '8', '9'],
  ['4', '5', '6'],
  ['1', '2', '3'],
  ['清除', '0', '删除']
];

// 密码输入完成回调
const handleCustomPasswordComplete = (password) => {
  console.log('支付密码输入完成:', password);
  // 这里可以处理支付密码验证逻辑
  showCustomPasswordDialog.value = false;
};
</script>

API

属性

| 属性名 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | visible | Boolean | false | 弹窗是否可见，支持 v-model 双向绑定 | | title | String | '请输入密码' | 弹窗标题 | | confirmText | String | '确定' | 确认按钮文本 | | maxLength | Number | 6 | 密码最大长度 | | showPassword | Boolean | false | 是否明文显示密码 | | keyboardLayout | Array | 详见默认值 | 自定义数字键盘布局 |

默认键盘布局

[
  ['1', '2', '3'],
  ['4', '5', '6'],
  ['7', '8', '9'],
  ['清除', '0', '删除']
]

事件

| 事件名 | 说明 | 参数 | | --- | --- | --- | | complete | 密码输入完成时触发（达到最大长度） | password: String - 输入的密码 | | confirm | 点击确认按钮时触发 | password: String - 输入的密码 | | close | 点击关闭按钮或取消按钮时触发 | 无 |

示例

完整示例

<template>
  <div class="password-input-demo">
    <h2>密码输入弹窗示例</h2>
    
    <div class="demo-section">
      <h3>基本用法</h3>
      <button @click="showBasicDialog = true">打开密码输入弹窗</button>
      <p v-if="basicPassword">已输入密码: {{ maskPassword(basicPassword) }}</p>
    </div>
    
    <div class="demo-section">
      <h3>自定义配置</h3>
      <button @click="showCustomDialog = true">打开自定义密码输入弹窗</button>
      <p v-if="customPassword">已输入密码: {{ maskPassword(customPassword) }}</p>
    </div>
    
    <div class="demo-section">
      <h3>明文显示</h3>
      <button @click="showVisibleDialog = true">打开明文密码输入弹窗</button>
      <p v-if="visiblePassword">已输入密码: {{ visiblePassword }}</p>
    </div>
    
    <!-- 基本用法弹窗 -->
    <hbis-password-input
      v-model:visible="showBasicDialog"
      title="请输入密码"
      @complete="handleBasicComplete"
      @confirm="handleBasicConfirm"
      @close="handleBasicClose"
    />
    
    <!-- 自定义配置弹窗 -->
    <hbis-password-input
      v-model:visible="showCustomDialog"
      title="请输入支付密码"
      confirm-text="确认支付"
      :max-length="4"
      @complete="handleCustomComplete"
    />
    
    <!-- 明文显示弹窗 -->
    <hbis-password-input
      v-model:visible="showVisibleDialog"
      title="请输入密码（明文）"
      :show-password="true"
      @complete="handleVisibleComplete"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { hbisPasswordInput } from '@hbis-uni/components';

// 基本用法
const showBasicDialog = ref(false);
const basicPassword = ref('');

// 自定义配置
const showCustomDialog = ref(false);
const customPassword = ref('');

// 明文显示
const showVisibleDialog = ref(false);
const visiblePassword = ref('');

// 密码掩码处理
const maskPassword = (password) => {
  return '*'.repeat(password.length);
};

// 基本用法回调
const handleBasicComplete = (password) => {
  basicPassword.value = password;
  console.log('基本用法密码输入完成:', password);
  showBasicDialog.value = false;
};

const handleBasicConfirm = (password) => {
  basicPassword.value = password;
  console.log('基本用法确认密码:', password);
  showBasicDialog.value = false;
};

const handleBasicClose = () => {
  console.log('基本用法弹窗关闭');
  showBasicDialog.value = false;
};

// 自定义配置回调
const handleCustomComplete = (password) => {
  customPassword.value = password;
  console.log('自定义配置密码输入完成:', password);
  showCustomDialog.value = false;
};

// 明文显示回调
const handleVisibleComplete = (password) => {
  visiblePassword.value = password;
  console.log('明文显示密码输入完成:', password);
  showVisibleDialog.value = false;
};
</script>

<style scoped>
.password-input-demo {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.demo-section {
  margin-bottom: 30px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.demo-section h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #333;
}

button {
  padding: 10px 20px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

button:hover {
  background-color: #66b1ff;
}

p {
  margin-top: 10px;
  color: #666;
}
</style>

注意事项

1. 密码安全：

   • 组件内部不会存储密码，密码只通过事件回调传递给父组件
   • 建议在父组件中对密码进行加密处理后再发送到服务器

2. 自定义键盘：

   • 自定义键盘布局时，建议保持与默认布局相似的结构
   • 动作键（如"清除"、"删除"）的功能已内置，无需额外处理

3. 响应式设计：

   • 组件已适配移动设备，在小屏幕上会自动调整布局
   • 在移动设备上使用时，建议确保弹窗大小合适

4. 事件处理：

   • complete 事件在密码输入达到最大长度时自动触发
   • confirm 事件在点击确认按钮时触发，无论密码是否达到最大长度
   • close 事件在点击关闭按钮或取消按钮时触发

浏览器兼容性

• Chrome >= 60
• Firefox >= 55
• Safari >= 12
• Edge >= 79
• 支持现代移动浏览器

贡献

欢迎提交 Issue 和 Pull Request 来改进这个组件。

许可证

ISC