Vue 3.X element-plus 监听大小写锁定键状态，对密码输入框进行大写锁定提示

功能

        监听大小写锁定键状态，对密码输入框进行大写锁定提示。

方法

        监听鼠标点击事件，键盘keyup、keydown事件。

        KeyboardEvent.getModifierState()可以检测指定的功能键是否激活。它的常用参数如下：

Alt：Alt 键
CapsLock：大写锁定键
Control：Ctrl 键
Meta：Meta 键
NumLock：数字键盘开关键
Shift：Shift 键

        参考MouseEvent getModifierState() 方法 (w3school.com.cn) 

 实现

         前端：不采用focus事件，因为focus获得的event里没有getModifierState方法。注意当焦点不在密码输入框时，把提示隐藏。

        JS：

onMounted(() => {
  document.addEventListener('keyup', (e) => {
    // 检测caps lock状态
    if (e.getModifierState('CapsLock')) {
      visible.value = true;
      return;
    } else {
      visible.value = false;
    }
  })
})
function handlePswFocus(event) {
  // 检测caps lock状态
  if (event.getModifierState('CapsLock')) {
    visible.value = true;
  } else {
    visible.value = false;
  }
}