ShortPassword 短密码

网格状密码输入,常用于支付密码,支持自定义长度和提示

网格状密码输入,常用于支付密码

演示

9:41

代码示例

<!-- 隐藏状态 -->
  <re-button theme="primary" @click="showDefault = true">打开短密码</re-button>

<!-- 显示状态 -->
  <re-button theme="primary" @click="showVisible = true">显示短密码</re-button>

<!-- 带标题 -->
  <re-button theme="primary" @click="showTitle = true">带标题</re-button>

<!-- 带描述 -->
  <re-button theme="primary" @click="showDesc = true">带描述</re-button>

<!-- 带提示 -->
  <re-button theme="primary" @click="showTips = true">带提示</re-button>

<!-- 预设值 -->
  <re-button theme="primary" @click="showValue = true">预设值</re-button>

<!-- 自定义长度 -->
  <re-button theme="primary" @click="showLength4 = true">4位密码</re-button>
  <re-button theme="primary" @click="showLength6 = true">6位密码</re-button>

<!-- 完整配置 -->
  <re-button theme="primary" @click="showFull = true">完整配置</re-button>

<!-- 事件日志 -->
  <re-short-password class="demo-default" :visible="showDefault" @update:visible="showDefault = $event" @close="onClose('default')" @complete="onComplete('default', $event)" />
  <re-short-password class="demo-visible" :visible="showVisible" @update:visible="showVisible = $event" @close="onClose('visible')" @complete="onComplete('visible', $event)" />
  <re-short-password class="demo-title" title="请输入支付密码" :visible="showTitle" @update:visible="showTitle = $event" @close="onClose('title')" @complete="onComplete('title', $event)" />
  <re-short-password class="demo-desc" title="支付密码" description="请输入6位数字密码" :visible="showDesc" @update:visible="showDesc = $event" @close="onClose('desc')" @complete="onComplete('desc', $event)" />
  <re-short-password class="demo-tips" title="支付密码" tips="忘记密码?" :visible="showTips" @update:visible="showTips = $event" @close="onClose('tips')" @complete="onComplete('tips', $event)" />
  <re-short-password class="demo-value" :value="123" :visible="showValue" @update:visible="showValue = $event" @close="onClose('value')" @complete="onComplete('value', $event)" />
  <re-short-password class="demo-length-4" :length="4" :visible="showLength4" @update:visible="showLength4 = $event" @close="onClose('length4')" @complete="onComplete('length4', $event)" />
  <re-short-password class="demo-length-6" :length="6" :visible="showLength6" @update:visible="showLength6 = $event" @close="onClose('length6')" @complete="onComplete('length6', $event)" />
  <re-short-password class="demo-full" title="支付密码" description="请输入6位数字" tips="忘记密码?" :value="12" :length="6" :visible="showFull" @update:visible="showFull = $event" @close="onClose('full')" @complete="onComplete('full', $event)" />

引入

推荐使用 easycom 模式,配置后无需手动 import 即可直接使用 <re-short-password />。

API

ShortPassword Props

名称类型默认值描述必传
visiblebooleanfalse是否显示短密码输入N
valuestring | number""当前输入值N
lengthnumber6密码长度N
titlestring"请输入支付密码"标题N
descriptionstring""描述文字N
tipsstring""提示文字N
customStylestring""自定义样式N

ShortPassword Events

名称参数描述
completevalue: string-
inputvalue: string输入时触发
focus-获得焦点时触发
close-关闭时触发
update:visiblevalue: boolean显隐变化时触发

ShortPassword Slots

名称描述
--