BizLockScreen 锁屏

全屏高 z-index 毛玻璃锁屏遮罩：头像 / 用户名 / 密码解锁，verify 注入校验逻辑（支持异步调后端），失败抖动并计数提示；Esc 与点击遮罩均不关闭。配合 useIdleTimeout 实现「临时离席自动锁屏」——金融 / 政务合规端标配。

基础用法

verify 注入异步校验（演示密码 123456），Enter 或按钮解锁；失败抖动 + 次数提示。

<script setup lang="ts">
/** 基础用法：verify 注入异步校验（演示密码 123456），失败抖动并计数 */
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { BizLockScreen } from 'vue3-ep-biz-lib'

const visible = ref(false)

const verify = (password: string): Promise<boolean> =>
  new Promise((resolve) => {
    setTimeout(() => resolve(password === '123456'), 600)
  })

const onUnlock = (): void => {
  ElMessage.success('解锁成功')
}
</script>

<template>
  <ElButton type="primary" @click="visible = true">锁定屏幕</ElButton>
  <BizLockScreen v-model="visible" name="王小明（admin）" :verify="verify" @unlock="onUnlock" />
</template>

显示代码

离席自动锁

活动中无操作 15s 后锁定

useIdleTimeout（演示 15s 超时 / 8s 预警）→ 超时自动锁屏 → 解锁后 unlock() 重新计时。

<script setup lang="ts">
/** 离席自动锁：useIdleTimeout 倒计时（演示 15s 超时 / 8s 预警）→ 锁屏 → 解锁重新计时 */
import { ref } from 'vue'
import { ElButton, ElMessage, ElTag } from 'element-plus'
import { BizLockScreen, useIdleTimeout } from 'vue3-ep-biz-lib'

const locked = ref(false)

const idle = useIdleTimeout({
  timeout: 15_000,
  warnBefore: 8_000,
  onWarn: () => ElMessage.warning('长时间未操作，即将锁定屏幕'),
  onTimeout: () => {
    locked.value = true
  },
})

const verify = (password: string): boolean => password === '123456'

const onUnlock = (): void => {
  idle.unlock()
  ElMessage.success('已解锁，重新开始计时')
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 420px">
    <div style="display: flex; gap: 12px; align-items: center">
      <ElTag :type="idle.locked.value ? 'danger' : 'success'">
        {{ idle.locked.value ? '已锁定' : '活动中' }}
      </ElTag>
      <span style="font-size: 13px; color: var(--el-text-color-secondary)">
        {{ idle.locked.value ? '输入 123456 解锁' : `无操作 ${Math.ceil(idle.remaining.value / 1000)}s 后锁定` }}
      </span>
    </div>
    <div>
      <ElButton size="small" @click="idle.reset()">模拟活动（重置计时）</ElButton>
      <ElButton size="small" type="danger" plain @click="idle.lock()">立即锁定</ElButton>
    </div>
  </div>

  <BizLockScreen v-model="locked" name="王小明（admin）" :verify="verify" @unlock="onUnlock" />
</template>

显示代码

外观自定义

title / avatar / placeholder 换肤，多系统共用时区分子系统。

<script setup lang="ts">
/** 外观自定义：title / avatar / placeholder 换肤（多系统共用锁屏时区分子系统） */
import { ref } from 'vue'
import { ElButton, ElMessage } from 'element-plus'
import { BizLockScreen } from 'vue3-ep-biz-lib'

const visible = ref(false)

const verify = (password: string): boolean => password === '123456'

const onUnlock = (): void => {
  ElMessage.success('解锁成功')
}
</script>

<template>
  <ElButton type="primary" @click="visible = true">锁定屏幕</ElButton>
  <BizLockScreen
    v-model="visible"
    title="资金监管平台已锁定"
    name="李芳（财务复核岗）"
    avatar="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
    placeholder="请输入复核密码"
    :verify="verify"
    @unlock="onUnlock"
  />
</template>

显示代码

同步校验与失败审计

失败 0 次输入不足 6 位会失败——达到 3 次组件自身会加强提示

verify 返回 boolean 的本地规则；unlock-fail 事件接审计计数。

<script setup lang="ts">
/** 同步校验与失败计数：verify 返回 boolean（本地规则），unlock-fail 事件接审计日志 */
import { ref } from 'vue'
import { ElButton, ElMessage, ElTag } from 'element-plus'
import { BizLockScreen } from 'vue3-ep-biz-lib'

const visible = ref(false)
const failCount = ref(0)

/** 同步规则：长度 ≥ 6 视为通过（演示） */
const verify = (password: string): boolean => password.length >= 6

const onUnlock = (): void => {
  ElMessage.success('解锁成功')
}

const onUnlockFail = (password: string): void => {
  failCount.value += 1
  ElMessage.warning(`第 ${failCount.value} 次校验失败（输入 ${password.length} 位）`)
}
</script>

<template>
  <div style="display: flex; gap: 12px; align-items: center">
    <ElButton type="primary" @click="visible = true">锁定屏幕</ElButton>
    <ElTag :type="failCount > 0 ? 'danger' : 'info'" effect="plain">失败 {{ failCount }} 次</ElTag>
    <span style="font-size: 12px; color: var(--el-text-color-secondary)">输入不足 6 位会失败——达到 3 次组件自身会加强提示</span>
  </div>
  <BizLockScreen v-model="visible" name="王小明（admin）" :verify="verify" @unlock="onUnlock" @unlock-fail="onUnlockFail" />
</template>

显示代码

聚焦控制

focus() 编程式聚焦密码框，锁屏打开后自动聚焦。

<script setup lang="ts">
/** 聚焦控制：focus() 编程式聚焦密码框——锁屏打开后自动聚焦 / 业务侧手动唤起键盘 */
import { nextTick, ref, watch } from 'vue'
import { ElButton, ElMessage } from 'element-plus'
import { BizLockScreen } from 'vue3-ep-biz-lib'

const visible = ref(false)
const lockRef = ref<{ focus: () => void }>()

const verify = (password: string): boolean => password === '123456'

/** 打开即聚焦（触屏设备可再绑定输入框 focus 唤起软键盘） */
watch(visible, (value) => {
  if (value) {
    void nextTick(() => {
      lockRef.value?.focus()
    })
  }
})

const onUnlock = (): void => {
  ElMessage.success('解锁成功，已自动聚焦下一次输入')
}
</script>

<template>
  <div style="display: flex; gap: 8px; align-items: center">
    <ElButton type="primary" @click="visible = true">锁定并自动聚焦</ElButton>
    <ElButton :disabled="!visible" @click="lockRef?.focus()">手动 focus()</ElButton>
  </div>
  <BizLockScreen ref="lockRef" v-model="visible" name="王小明（admin）" :verify="verify" @unlock="onUnlock" />
</template>

显示代码

敏感内容保护

正常办公解锁密码 123456

锁定期间页面金额同步打码，解锁后恢复（柜面 / 经办台临时离席）。

<script setup lang="ts">
/** 敏感内容保护：锁定期间表格金额同步打码，解锁后恢复（柜面 / 经办台临时离席场景） */
import { computed, ref } from 'vue'
import { ElButton, ElTable, ElTableColumn, ElTag } from 'element-plus'
import { BizLockScreen } from 'vue3-ep-biz-lib'

interface PaymentRow { id: string; payee: string; amount: number }

const locked = ref(false)

const rows: PaymentRow[] = [
  { id: 'PAY-001', payee: '深圳市星辰制造有限公司', amount: 580000 },
  { id: 'PAY-002', payee: '广州华远贸易', amount: 122000 },
  { id: 'PAY-003', payee: '北京隆晟咨询', amount: 46000 },
]

const maskOf = (value: string): string => (locked.value ? '******' : value)

const amountText = (row: PaymentRow): string =>
  locked.value ? '¥ ******' : `¥ ${row.amount.toLocaleString('zh-CN')}`

const statusType = computed(() => (locked.value ? 'danger' : 'success'))

const verify = (password: string): boolean => password === '123456'
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 640px">
    <div style="display: flex; gap: 12px; align-items: center">
      <ElButton type="danger" plain @click="locked = true">临时离席，锁定工作台</ElButton>
      <ElTag :type="statusType">{{ locked ? '已锁定' : '正常办公' }}</ElTag>
      <span style="font-size: 12px; color: var(--el-text-color-secondary)">解锁密码 123456</span>
    </div>

    <ElTable :data="rows" size="small" border>
      <ElTableColumn prop="id" label="付款单号" width="110" />
      <ElTableColumn label="收款方">
        <template #default="{ row }">{{ maskOf(row.payee) }}</template>
      </ElTableColumn>
      <ElTableColumn label="金额" width="120" align="right">
        <template #default="{ row }">{{ amountText(row as PaymentRow) }}</template>
      </ElTableColumn>
    </ElTable>
  </div>

  <BizLockScreen v-model="locked" name="王小明（柜员 0231）" :verify="verify" />
</template>

显示代码

Props

属性名	类型	默认值	说明
v-model	boolean	false	显隐
title	string	屏幕已锁定	标题
name	string	—	当前用户名展示
avatar	string	—	头像（缺省锁图标）
verify	(password) => boolean | Promise<boolean>	非空即过	解锁校验（业务注入）
placeholder	string	请输入密码解锁	输入占位

Events

事件名	参数	说明
unlock	(password)	解锁成功
unlock-fail	(password)	校验失败

Expose

属性/方法	说明
focus()	聚焦密码框