Vue中监听密码框是否开启大写

主要实现方法是利用事件对象e:keyboardEvent的KeyboardEvent方法,监听keydown事件，来判断是否开启了大写。

使用：

这里讲实现方法，如用第三方组件库，把input替换即可，方法不变。

<template>
  <div>
    <input type="password" placeholder="密码" 
      v-model="password"
      onfocus="this.type='password'" class="custom-input passIcon" maxlength="32" 
      @keydown.native='onCapsLock'>
    </input>
    <span v-show="onCapital">大写锁定已开启</span>
  </div>   
</template>
<script>
import {capsLock} from '@/mixin'
export default {
  name:"login",
  mixins:[capsLock],
  data(){
    return{
      
    }
  }
}
</script>

方法的定义

由于我自己项目多处会用到方法(修改密码，登录，忘记密码等)，为了复用避免代码重复，所以我这里写成了mixins的形式。vue3可以抽离成hook，都一样。

// 定义mixins
export const capsLock = {
  data() {
    return {
      onCapital: false,
    };
  },
  methods: {
    onCapsLock(event) {
      /**
      * 此处的运算符主要是为了防止报错，因为getModifierState仅为KeyboardEvent定义，
      * 而Event的原型上是没有getModifierState方法的。
      */ 
      let e= event.getModifierState ? event :  new KeyboardEvent('keydown');
      this.onCapital= e.getModifierState('CapsLock')
    },
  },
};