vue（大写提示功能）

wcsy2018110

已于 2024-01-22 13:59:48 修改

阅读量183

点赞数

分类专栏： vue 文章标签： vue.js 数学建模前端

于 2023-06-16 10:48:13 首次发布

本文链接：https://blog.csdn.net/qq_48378883/article/details/131242358

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这段代码展示了在Vue.js应用中，如何创建一个登录页面，其中密码输入框会检测大写锁定键的状态。当大写锁定开启时，会显示一个提示信息。方法`checkCapslock`监听键盘事件，判断是否开启了大写锁定，并更新提示状态。

摘要由CSDN通过智能技术生成

<template>
  <div class="login-page" style="height: 100%">
    <el-form-item prop="password">
            <el-tooltip v-model="upperTooltip" content="已开启大写" placement="top" manual>
              <el-input
                type="password"
                v-model.trim="loginForm.password"
                class="pwd"
                ref="password"
                placeholder="请输入密码"
                prefix-icon="el-icon-lock"
                show-password
                @keyup.native="checkCapslock"
                @blur="capsTooltip = false"
                @keyup.enter.native="enterProjectList"
              ></el-input>
            </el-tooltip>
          </el-form-item>
  </div>
</template>
 
<script>
export default {
  name: 'Login',
  data() {
    return {
     upperTooltip: true
    }
  },
 
  methods: {
    checkCapslock({ shiftKey, key } = {}) {
      if (key && key.length === 1) {
        if (
          (shiftKey && key >= 'a' && key <= 'z') ||
          (!shiftKey && key >= 'A' && key <= 'Z')
        ) {
          this.upperTooltip = true
        } else {
          this.upperTooltip = false
        }
      }
      if (key === 'CapsLock' && this.upperTooltip === true) {
        this.upperTooltip = false
      }
    }
  }
}
</script>
 
<style lang="scss" scoped>
 
</style>