Enter 키를 클릭하여 Vue에 직접 로그인하는 방법-프런트엔드 Q&A-php.cn

Enter 키를 클릭하여 Vue에 직접 로그인하는 방법

王林

풀어 주다： 2023-05-11 11:01:07

원래의

2670명이 탐색했습니다.

Vue.js는 사용자 인터페이스 구축을 위한 진보적인 JavaScript 프레임워크입니다. 도구로서 Vue.js는 더욱 유연하며 PC 웹사이트뿐만 아니라 모바일 애플리케이션 개발에도 사용할 수 있습니다. 많은 시나리오에서 사용자가 페이지의 양식을 통해 로그인할 수 있도록 허용해야 합니다. 이번 글에서는 Vue.js를 이용해 직접 로그인할 수 있는 엔터키를 구현하는 방법을 소개하겠습니다.

1. 기본 코드 구현

먼저 입력 상자와 로그인 버튼이 필요합니다. 샘플 코드는 다음과 같습니다.

<template>
  <div>
    <input v-model="username" type="text" placeholder="请输入用户名">
    <input v-model="password" type="password" placeholder="请输入密码" @keyup.enter="login">
    <button @click="login">登录</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login () {
      // 登录操作
    }
  }
}
</script>

로그인 후 복사

그 중 v-model 지시문은 두 가지에 사용됩니다. -way 입력 상자 값 바인딩, @keyup.enter 이벤트는 Enter 키를 모니터링하고, @click 이벤트는 마우스 클릭 및 login을 모니터링합니다. 로그인 기능입니다. v-model 指令用于双向绑定输入框的值，@keyup.enter 事件监听回车键，@click 事件监听鼠标点击，login 为登录函数。

我们在模板中，将回车键的事件绑定到了输入框上，并且在登录按钮上同步添加了点击事件。在输入框的回车事件中，直接调用了登录函数，以完成当前的登录操作。

二、防止重复提交

我们可以在登录按钮和回车键事件上，使用 @click.prevent 和 @keyup.enter.prevent 防止多次提交，避免重复操作。如下：

<template>
  <div>
    <input v-model="username" type="text" placeholder="请输入用户名">
    <input v-model="password" type="password" placeholder="请输入密码" @keyup.enter.prevent="login">
    <button @click.prevent="login">登录</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      username: '',
      password: '',
      isSubmitting: false,
    }
  },
  methods: {
    login () {
      if(this.isSubmitting) return;
      
      this.isSubmiting = true;
      // 登录操作
      
      this.isSubmitting = false;
    }
  }
}
</script>

로그인 후 복사

在数据中增加一个 isSubmitting 属性，用于判断当前是否正在提交表单。在调用登录函数时检查该属性是否为真，如果为真，则直接返回，避免了重复提交表单，确保了用户的正常体验。

三、键盘焦点

当表单中存在多个输入框时，我们需要一个方法来确定用户在哪一个输入框中。可以使用 Vue.js 提供的 ref 属性获取元素的键盘焦点。如下：

<template>
  <div>
    <input v-model="username" type="text" placeholder="请输入用户名" ref="usernameInput">
    <input v-model="password" type="password" placeholder="请输入密码" @keyup.enter.prevent="submit" ref="passwordInput">
    <button @click.prevent="submit">登录</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      username: '',
      password: '',
      isSubmitting: false,
    }
  },
  methods: {
    submit () {
      if(this.isSubmitting) return;
      
      this.isSubmiting = true;
      // 登录操作
  
      this.isSubmitting = false;
    }
  },
  mounted() {
    this.$refs.usernameInput.$el.focus();
  }
}
</script>

로그인 후 복사

我们在 mounted 生命周期中，使用 $refs 属性获取输入框的 DOM 元素，并使用 focus

템플릿에서는 Enter 키 이벤트를 입력 상자에 바인딩하고 동시에 로그인 버튼에 클릭 이벤트를 추가했습니다. 입력 상자의 Enter 이벤트에서는 로그인 함수를 직접 호출하여 현재 로그인 작업을 완료합니다.

2. 중복 제출 방지

로그인 버튼에 @click.prevent 및 @keyup.enter.prevent를 사용하고 주요 이벤트를 입력하면 중복 제출을 방지할 수 있습니다. 중복을 피하기 위해. 다음과 같습니다. 🎜rrreee🎜양식이 현재 제출되고 있는지 확인하려면 데이터에 isSubmitting 속성을 추가하세요. 로그인 기능을 호출할 때 이 속성이 true인지 확인하세요. true인 경우 양식을 반복적으로 제출하지 않고 정상적인 사용자 경험을 보장하면서 직접 반환하세요. 🎜🎜3. 키보드 포커스🎜🎜양식에 여러 입력 상자가 있는 경우 사용자가 어떤 입력 상자에 있는지 확인하는 방법이 필요합니다. Vue.js에서 제공하는 ref 속성을 사용하여 요소의 키보드 포커스를 얻을 수 있습니다. 다음과 같습니다: 🎜rrreee🎜mounted 라이프 사이클에서는 $refs 속성을 사용하여 입력 상자의 DOM 요소를 가져오고

focus 키보드 포커스 방법 첫 번째 입력 상자에 포커스가 설정됩니다. 🎜🎜4. 요약🎜🎜위 실습을 통해 Vue.js를 사용하여 Enter 키를 사용한 직접 로그인 기능을 구현하는 방법과 반복 제출 및 키보드 포커스를 방지하는 처리를 적용하여 사용자 경험을 최적화하는 방법을 배웠습니다. 구현 코드의 일부가 코드 예제에도 제공되어 도움이 되기를 바랍니다. 🎜

위 내용은 Enter 키를 클릭하여 Vue에 직접 로그인하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!