BizPasswordInput 密码输入

唯一密码录入组件（原独立组件 BizPasswordMeter 密码强度计已并入本包，作为子导出组件保留、可独立使用）。密码输入增强：显示切换（EP 原生）+ 四档实时强度条（弱 / 中 / 强 / 极强，按长度 / 大小写 / 数字 / 符号组合评估）+ 规则清单逐项打勾（内置四条强度规则，rules 自定义合规规则合并展示）+ 可选 confirm 二次输入一致性校验。注册 / 改密 / 等保合规页标配；强度变化以 strength-change 外抛完整评估结果。

从旧版迁移：show-strength prop 名不变（原三档简版升级为四档完整版）；BizPasswordMeter 改从 biz-password-input 包导入（import { BizPasswordMeter } from 'vue3-ep-biz-lib' 用法不变）。

基础用法

• 长度不小于 8 位
• 包含大写和小写字母
• 包含数字
• 包含符号

输入观察四档强度（弱 / 中 / 强 / 极强）与规则清单变化：长度不足 8 位封顶「弱」，覆盖越多字符组合档位越高

默认开启四档强度条与内置规则清单（长度 ≥8 / 大小写 / 数字 / 符号）；长度不足 8 位封顶「弱」，≥12 位有额外加成。

<script setup lang="ts">
/** 场景：基础录入——新员工开通账号时设置初始密码，实时四档强度 + 内置规则清单逐项打勾 */
import { ref } from 'vue'
import { BizPasswordInput } from 'vue3-ep-biz-lib'

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

<template>
  <div style="max-width: 420px">
    <BizPasswordInput v-model="password" placeholder="请设置账号初始密码" />
    <p style="margin: 10px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      输入观察四档强度（弱 / 中 / 强 / 极强）与规则清单变化：长度不足 8 位封顶「弱」，覆盖越多字符组合档位越高
    </p>
  </div>
</template>

显示代码

强度与规则清单开关

显示强度条

显示规则清单

强

• 长度不小于 8 位
• 包含大写和小写字母
• 包含数字
• 包含符号

弹窗等紧凑场景可只留强度条；合规要求严格的场景展开完整规则清单

show-strength 控制强度条与档位文案，show-rules 控制规则清单，二者可独立裁剪。

<script setup lang="ts">
/** 场景：强度与规则清单开关——按页面密度自由裁剪（show-strength / show-rules 组合） */
import { ref } from 'vue'
import { ElSwitch } from 'element-plus'
import { BizPasswordInput } from 'vue3-ep-biz-lib'

const password = ref('Aa12345!')
const showStrength = ref(true)
const showRules = ref(true)
</script>

<template>
  <div style="max-width: 420px; display: flex; flex-direction: column; gap: 12px">
    <div style="display: flex; gap: 18px; align-items: center">
      <span style="font-size: 13px; color: var(--el-text-color-secondary)">显示强度条</span>
      <ElSwitch v-model="showStrength" />
      <span style="font-size: 13px; color: var(--el-text-color-secondary)">显示规则清单</span>
      <ElSwitch v-model="showRules" />
    </div>
    <BizPasswordInput v-model="password" :show-strength="showStrength" :show-rules="showRules" />
    <p style="margin: 0; font-size: 12px; color: var(--el-text-color-placeholder)">
      弹窗等紧凑场景可只留强度条；合规要求严格的场景展开完整规则清单
    </p>
  </div>
</template>

显示代码

四档强度对照

弱

当前样例：abc123

点击填充不同强度样例，观察弱 / 中 / 强 / 极强档位跃迁（独立使用 BizPasswordMeter 渲染）。

<script setup lang="ts">
/** 场景：四档对照——运营后台演示口径，点击填充不同强度样例观察档位跃迁 */
import { ref } from 'vue'
import { ElButton } from 'element-plus'
import { BizPasswordMeter } from 'vue3-ep-biz-lib'

const pwd = ref('abc123')

const samples = [
  { label: '空', value: '' },
  { label: '弱', value: 'abc123' },
  { label: '中', value: 'Abc12345' },
  { label: '强', value: 'Abc12345xyzq' },
  { label: '极强', value: 'QwErTy!2#4%6&8Xz' },
]
</script>

<template>
  <div style="max-width: 460px">
    <div style="display: flex; gap: 8px; margin-bottom: 12px">
      <ElButton v-for="s in samples" :key="s.label" size="small" @click="pwd = s.value">{{ s.label }}</ElButton>
    </div>
    <BizPasswordMeter :password="pwd" />
    <p style="margin: 8px 0 0; font-size: 12px; color: var(--el-text-color-placeholder); word-break: break-all">
      当前样例：{{ pwd === '' ? '（空）' : pwd }}
    </p>
  </div>
</template>

显示代码

自定义合规规则

账号：zhangsan

• 长度不小于 8 位
• 包含大写和小写字母
• 包含数字
• 包含符号
• 不得包含账号名
• 不超过 32 位
• 不能为纯数字

内置强度规则（长度 / 大小写 / 数字 / 符号）与业务合规规则合并逐项打勾，validate() 同时校验两份清单

rules 注入业务合规规则（label + pattern/test），与内置强度规则合并逐项打勾，并计入 validate() 校验。

<script setup lang="ts">
/** 场景：自定义合规规则——rules 注入业务合规项（禁含账号名 / 长度上限 / 禁纯数字），与内置清单合并展示 */
import { ref } from 'vue'
import { BizPasswordInput } from 'vue3-ep-biz-lib'

const account = 'zhangsan'
const password = ref('')

const rules = [
  { label: '不得包含账号名', test: (v: string) => !v.toLowerCase().includes(account) },
  { label: '不超过 32 位', test: (v: string) => v.length <= 32 },
  { label: '不能为纯数字', pattern: /\D/ },
]
</script>

<template>
  <div style="max-width: 420px">
    <p style="margin: 0 0 8px; font-size: 13px; color: var(--el-text-color-secondary)">账号：{{ account }}</p>
    <BizPasswordInput v-model="password" :rules="rules" placeholder="如 zhangsan123 会被合规规则拒绝" />
    <p style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-placeholder)">
      内置强度规则（长度 / 大小写 / 数字 / 符号）与业务合规规则合并逐项打勾，validate() 同时校验两份清单
    </p>
  </div>
</template>

显示代码

confirm 一致性校验

• 长度不小于 8 位
• 包含大写和小写字母
• 包含数字
• 包含符号

confirm 模式追加二次输入框；maxlength 等约束同步作用于两个输入框；提交前 validate() 校验强度与一致性

confirm 追加二次输入框，不一致即时红字提示；maxlength / disabled / readonly 等约束同步作用于两个输入框；resetConfirm() 清空二次输入。

<script setup lang="ts">
/** 场景：confirm 一致性校验——设置交易密码时二次输入，不一致即时红字提示 */
import { ref } from 'vue'
import { ElButton, ElMessage } from 'element-plus'
import { BizPasswordInput } from 'vue3-ep-biz-lib'
import type { BizPasswordInputInstance } from 'vue3-ep-biz-lib'

const password = ref('')
const pwdRef = ref<BizPasswordInputInstance>()

const onSubmit = (): void => {
  if (!pwdRef.value?.validate()) {
    ElMessage.error('密码不满足强度规则或两次输入不一致')
    return
  }
  ElMessage.success('交易密码设置成功')
  pwdRef.value?.resetConfirm()
}
</script>

<template>
  <div style="max-width: 420px; display: flex; flex-direction: column; gap: 12px">
    <BizPasswordInput ref="pwdRef" v-model="password" confirm maxlength="20" placeholder="请输入交易密码" />
    <ElButton type="primary" @click="onSubmit">提交交易密码</ElButton>
    <p style="margin: 0; font-size: 12px; color: var(--el-text-color-placeholder)">
      confirm 模式追加二次输入框；maxlength 等约束同步作用于两个输入框；提交前 validate() 校验强度与一致性
    </p>
  </div>
</template>

显示代码

修改密码表单

当前密码

新密码

• 长度不小于 8 位
• 包含大写和小写字母
• 包含数字
• 包含符号

改密场景：当前密码 + 新密码（confirm 二次输入 + 实时强度），提交前 validate() 统一校验。

<script setup lang="ts">
/** 场景：改密表单——旧密码 + 新密码（confirm 二次输入）+ 实时强度门槛，提交前统一校验 */
import { reactive, ref } from 'vue'
import { ElButton, ElForm, ElFormItem, ElInput, ElMessage } from 'element-plus'
import { BizPasswordInput } from 'vue3-ep-biz-lib'
import type { BizPasswordInputInstance } from 'vue3-ep-biz-lib'
import type { FormInstance } from 'element-plus'

const formRef = ref<FormInstance>()
const pwdRef = ref<BizPasswordInputInstance>()
const form = reactive({ oldPassword: '', newPassword: '' })

const onSubmit = (): void => {
  if (form.oldPassword === '') {
    ElMessage.warning('请输入当前密码')
    return
  }
  if (!pwdRef.value?.validate()) {
    ElMessage.error('新密码不满足强度规则或两次输入不一致')
    return
  }
  ElMessage.success(`密码修改成功：${form.oldPassword} → ${form.newPassword}，下次登录生效`)
  form.oldPassword = ''
  form.newPassword = ''
  pwdRef.value?.resetConfirm()
}
</script>

<template>
  <div style="max-width: 460px">
    <ElForm ref="formRef" :model="form" label-width="88px">
      <ElFormItem label="当前密码">
        <ElInput v-model="form.oldPassword" type="password" show-password autocomplete="new-password" placeholder="请输入当前密码" />
      </ElFormItem>
      <ElFormItem label="新密码">
        <BizPasswordInput ref="pwdRef" v-model="form.newPassword" confirm placeholder="新密码（至少 8 位，含大小写与数字）" />
      </ElFormItem>
      <ElFormItem>
        <ElButton type="primary" @click="onSubmit">确认修改</ElButton>
      </ElFormItem>
    </ElForm>
  </div>
</template>

显示代码

注册流程

账号

登录密码

• 长度不小于 8 位
• 包含大写和小写字母
• 包含数字
• 包含符号
• 长度 10~20 位
• 同时包含字母与数字
• 不含空格

注册场景：validate() 联动提交按钮禁用态——内置强度规则与自定义规则全部通过且两次输入一致才可提交。

<script setup lang="ts">
/** 场景：注册流程——账号 + 密码（confirm 一致性）+ 强度达标后才能提交 */
import { computed, ref } from 'vue'
import { ElButton, ElForm, ElFormItem, ElInput, ElMessage } from 'element-plus'
import { BizPasswordInput } from 'vue3-ep-biz-lib'
import type { BizPasswordInputInstance } from 'vue3-ep-biz-lib'

const account = ref('')
const password = ref('')
const pwdRef = ref<BizPasswordInputInstance>()

const rules = [
  { label: '长度 10~20 位', test: (v: string) => v.length >= 10 && v.length <= 20 },
  { label: '同时包含字母与数字', test: (v: string) => /[A-Za-z]/.test(v) && /\d/.test(v) },
  { label: '不含空格', test: (v: string) => !/\s/.test(v) },
]

/** 内置 + 自定义规则全部通过才放行注册按钮 */
const canSubmit = computed(() => pwdRef.value?.validate() ?? false)

const onSubmit = (): void => {
  if (account.value === '') {
    ElMessage.warning('请输入账号')
    return
  }
  if (!canSubmit.value) {
    ElMessage.error('密码不满足强度规则或两次输入不一致')
    return
  }
  ElMessage.success(`注册成功：${account.value}`)
}
</script>

<template>
  <div style="max-width: 460px">
    <ElForm label-width="88px">
      <ElFormItem label="账号">
        <ElInput v-model="account" placeholder="请输入注册账号" clearable />
      </ElFormItem>
      <ElFormItem label="登录密码">
        <BizPasswordInput
          ref="pwdRef"
          v-model="password"
          confirm
          :rules="rules"
          placeholder="10~20 位，字母 + 数字组合"
        />
      </ElFormItem>
      <ElFormItem>
        <ElButton type="primary" :disabled="!canSubmit" @click="onSubmit">立即注册</ElButton>
      </ElFormItem>
    </ElForm>
  </div>
</template>

显示代码

等保三级口径

• 长度不小于 8 位
• 包含大写和小写字母
• 包含数字
• 包含符号
• 长度不少于 12 位
• 包含大写字母
• 包含小写字母
• 包含数字
• 包含特殊字符
• 不得包含账号名

等保三级要求：口令 ≥12 位且覆盖三类字符，90 天强制更换

合规场景：自定义六条规则（≥12 位、三类字符、不含账号名），confirm 一致性 + 一键合规校验。

<script setup lang="ts">
/** 场景：等保三级口径——12 位 + 三类字符 + 禁含账号名的完整合规规则集 */
import { ref } from 'vue'
import { ElAlert, ElButton, ElMessage } from 'element-plus'
import { BizPasswordInput } from 'vue3-ep-biz-lib'
import type { BizPasswordInputInstance } from 'vue3-ep-biz-lib'

const password = ref('')
const pwdRef = ref<BizPasswordInputInstance>()

const rules = [
  { label: '长度不少于 12 位', test: (v: string) => v.length >= 12 },
  { label: '包含大写字母', pattern: /[A-Z]/ },
  { label: '包含小写字母', pattern: /[a-z]/ },
  { label: '包含数字', pattern: /\d/ },
  { label: '包含特殊字符', pattern: /[^A-Za-z0-9]/ },
  { label: '不得包含账号名', test: (v: string) => !v.includes('admin') },
]
</script>

<template>
  <div style="max-width: 420px; display: flex; flex-direction: column; gap: 12px">
    <BizPasswordInput ref="pwdRef" v-model="password" :rules="rules" confirm placeholder="按等保三级口径设置口令" />
    <ElAlert type="warning" :closable="false" show-icon title="等保三级要求：口令 ≥12 位且覆盖三类字符，90 天强制更换" />
    <ElButton type="primary" @click="pwdRef?.validate() ? ElMessage.success('口令合规') : ElMessage.error('口令不满足等保要求')">合规校验</ElButton>
  </div>
</template>

显示代码

管理员重置密码

• 长度不小于 8 位
• 包含大写和小写字母
• 包含数字
• 包含符号

运维场景：一键生成随机强密码回填（规则全命中），重置后短信下发。

<script setup lang="ts">
/** 场景：管理员重置密码——一键生成随机强密码回填（规则全命中），重置后短信下发 */
import { ref } from 'vue'
import { ElButton, ElMessage } from 'element-plus'
import { BizPasswordInput } from 'vue3-ep-biz-lib'

const password = ref('')

const genStrong = (): void => {
  const upper = 'ABCDEFGHJKLMNPQRSTUVWXYZ'
  const lower = 'abcdefghijkmnpqrstuvwxyz'
  const digits = '23456789'
  const symbols = '!@#$%&*'
  const pick = (pool: string): string => pool[Math.floor(Math.random() * pool.length)]
  const groups = [pick(upper), pick(upper), pick(lower), pick(lower), pick(lower), pick(digits), pick(digits), pick(symbols)]
  password.value = groups.sort(() => Math.random() - 0.5).join('')
  ElMessage.success('已生成随机强密码')
}
</script>

<template>
  <div style="max-width: 420px; display: flex; flex-direction: column; gap: 12px">
    <BizPasswordInput v-model="password" placeholder="重置后的密码（可一键生成）" />
    <div style="display: flex; gap: 10px">
      <ElButton size="small" @click="genStrong">生成随机密码</ElButton>
      <ElButton size="small" type="primary" @click="ElMessage.success('已重置并短信下发')">重置密码</ElButton>
    </div>
  </div>
</template>

显示代码

独立强度计（BizPasswordMeter）

• 长度不小于 8 位
• 包含大写和小写字母
• 包含数字
• 包含符号

BizPasswordMeter 为 biz-password-input 的子导出组件：password 受控只读评估，可接入任何输入源（含接口回填的存量密码字段）

BizPasswordMeter 为本包子导出组件，可脱离 BizPasswordInput 搭配任意输入源（普通 ElInput、接口回填等）：password 受控只读评估，size 适配尺寸。

<script setup lang="ts">
/** 场景：独立强度计——搭配任意输入源（普通 ElInput / 接口回填），不绑定 BizPasswordInput 也能用 */
import { ref } from 'vue'
import { ElInput } from 'element-plus'
import { BizPasswordMeter } from 'vue3-ep-biz-lib'

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

<template>
  <div style="max-width: 420px">
    <ElInput v-model="pwd" size="small" placeholder="存量系统的普通输入框同样可驱动强度计" clearable />
    <BizPasswordMeter :password="pwd" size="small" show-rules style="margin-top: 8px" />
    <p style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-placeholder)">
      BizPasswordMeter 为 biz-password-input 的子导出组件：password 受控只读评估，可接入任何输入源（含接口回填的存量密码字段）
    </p>
  </div>
</template>

显示代码

强度事件日志

• 长度不小于 8 位
• 包含大写和小写字母
• 包含数字
• 包含符号
• 不含空格

最近 6 条评估日志

强度变化触发 strength-change，外抛 { level, text, builtin, custom } 完整评估结果（原 Meter change 语义，风控 / 审计侧可按档位联动拦截）。

<script setup lang="ts">
/** 场景：强度事件日志——strength-change 外抛完整评估结果，风控侧按档位联动拦截 */
import { ref } from 'vue'
import { ElTag } from 'element-plus'
import { BizPasswordInput } from 'vue3-ep-biz-lib'
import type { BizPasswordMeterResult } from 'vue3-ep-biz-lib'

const password = ref('')
const logs = ref<string[]>([])

const onStrengthChange = (result: BizPasswordMeterResult): void => {
  const time = new Date().toLocaleTimeString()
  const builtinHit = result.builtin.filter((item) => item.passed).length
  const customHit = result.custom.filter((item) => item.passed).length
  logs.value.unshift(
    `[${time}] 档位 ${result.level}（${result.text}）· 内置命中 ${builtinHit}/${result.builtin.length} · 自定义命中 ${customHit}/${result.custom.length}`
  )
  if (logs.value.length > 6) logs.value.pop()
}
</script>

<template>
  <div style="max-width: 460px">
    <BizPasswordInput v-model="password" :rules="[{ label: '不含空格', test: (v: string) => !/\s/.test(v) }]" @strength-change="onStrengthChange" />
    <div style="margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center">
      <ElTag size="small" type="info">最近 6 条评估日志</ElTag>
    </div>
    <ul v-if="logs.length > 0" style="margin: 8px 0 0; padding: 0 0 0 4px; list-style: none; display: flex; flex-direction: column; gap: 4px">
      <li v-for="(log, index) in logs" :key="index" style="font-size: 12px; color: var(--el-text-color-secondary); font-family: monospace">
        {{ log }}
      </li>
    </ul>
  </div>
</template>

显示代码

禁用 / 只读态

可编辑禁用只读

强

• 长度不小于 8 位
• 包含大写和小写字母
• 包含数字
• 包含符号

disabled / readonly 等 attrs 透传内部 el-input（confirm 模式下两个输入框同步生效），强度计仍实时展示当前值档位

disabled / readonly 等 attrs 透传内部 el-input，confirm 模式下两个输入框同步生效，强度计仍实时展示。

<script setup lang="ts">
/** 场景：禁用 / 只读态——审批详情页回显密码策略占位，禁止编辑但保留强度展示 */
import { ref } from 'vue'
import { ElRadioButton, ElRadioGroup } from 'element-plus'
import { BizPasswordInput } from 'vue3-ep-biz-lib'

const password = ref('Aa12345!')
const mode = ref<'editable' | 'disabled' | 'readonly'>('disabled')
</script>

<template>
  <div style="max-width: 420px; display: flex; flex-direction: column; gap: 12px">
    <ElRadioGroup v-model="mode">
      <ElRadioButton value="editable">可编辑</ElRadioButton>
      <ElRadioButton value="disabled">禁用</ElRadioButton>
      <ElRadioButton value="readonly">只读</ElRadioButton>
    </ElRadioGroup>
    <BizPasswordInput
      v-model="password"
      :disabled="mode === 'disabled'"
      :readonly="mode === 'readonly'"
      confirm
      placeholder="策略生效中的密码"
    />
    <p style="margin: 0; font-size: 12px; color: var(--el-text-color-placeholder)">
      disabled / readonly 等 attrs 透传内部 el-input（confirm 模式下两个输入框同步生效），强度计仍实时展示当前值档位
    </p>
  </div>
</template>

显示代码

Props（BizPasswordInput）

属性名	类型	默认值	说明
v-model	string	''	密码值
placeholder	string	'请输入密码'	占位文案
show-strength	boolean	true	强度条 + 档位文案（四档完整版：弱 / 中 / 强 / 极强）
show-rules	boolean	true	规则清单（内置四条 + 自定义合并、逐项打勾）
rules	BizPasswordRule[]	[]	自定义合规规则（label + pattern/test 二选一，合并展示并计入校验）
confirm	boolean	false	二次输入模式：追加确认输入框并校验一致性
confirm-placeholder	string	'请再次输入密码'	二次输入占位文案

其余 attrs 透传内部 el-input（maxlength / disabled / readonly / required...）；maxlength、disabled、readonly 同时作用于 confirm 二次输入框。

Events（BizPasswordInput）

事件名	参数	说明
update:modelValue	(value: string)	密码变化（v-model）
change	(value: string)	密码变化
strength-change	(result: BizPasswordMeterResult)	强度档位或规则命中态变化，外抛完整评估结果（原 Meter change 语义）

Slots（BizPasswordInput）

插槽名	说明
—	无自定义插槽

Expose（BizPasswordInput）

属性/方法	类型	说明
level	number	当前四档强度 0-4（0 = 空未评估）
strength	BizPasswordStrength	兼容三档口径（0-1 弱 / 2 中 / 3-4 强）
getResult	() => BizPasswordMeterResult | undefined	完整评估结果（档位 + 内置 / 自定义命中态）
validate	() => boolean	非空 + 内置强度规则全过 + 自定义规则全过（confirm 模式下含一致性）
resetConfirm	() => void	清空二次输入

子导出 BizPasswordMeter（独立用法）

BizPasswordMeter 由原独立组件 biz-password-meter 并入，实现位于 biz-password-input 包内（import { BizPasswordMeter } from 'vue3-ep-biz-lib'），可独立搭配任意输入源使用；BizPasswordInput 内部即复用该组件完成强度评估（评估逻辑全库仅此一份）。其 change 事件与 BizPasswordInput 的 strength-change 语义一致。

Props（BizPasswordMeter）

属性名	类型	默认值	说明
password	string	''	待评估密码（受控只读，可接任意输入源）
show-bar	boolean	true	显示四档色条
show-text	boolean	true	显示强度文案
show-rules	boolean	false	显示规则清单（内置 + 自定义合并）
rules	BizPasswordMeterRule[]	[]	自定义合规规则（仅清单展示，不参与强度分档）
size	'small' | 'default' | 'large'	'default'	尺寸（色条高度适配）

Events（BizPasswordMeter）

事件名	参数	说明
change	(result: BizPasswordMeterResult)	档位或命中态变化，外抛完整评估结果

Slots（BizPasswordMeter）

插槽名	说明
—	无自定义插槽

Expose（BizPasswordMeter）

名称	类型	说明
getLevel	() => number	当前档位 0-4
getResult	() => BizPasswordMeterResult	完整评估结果

类型定义

类型	说明
BizPasswordRule	自定义合规规则：{ label, pattern?, test? }（pattern 与 test 二选一，BizPasswordInput.rules 用）
BizPasswordMeterRule	强度计清单项：{ label, test }（BizPasswordMeter.rules 用）
BizPasswordMeterResult	评估结果：{ level, text, builtin, custom }（内置 / 自定义规则命中态）
BizPasswordStrength	兼容三档口径：'weak' | 'medium' | 'strong'
BizPasswordInputProps / BizPasswordMeterProps	两组件 Props 类型
BizPasswordInputInstance / BizPasswordMeterInstance	两组件实例类型