如何在输入文本区域中创建 Enter 事件以使用 Vue.js 和 Electron 按下按钮

Posted 2023-02-23

【中文标题】如何在输入文本区域中创建 Enter 事件以使用 Vue.js 和 Electron 按下按钮

【英文标题】：How to create Enter event in input text area to push the button with Vue.js & Electron

【发布时间】：2021-06-27 01:43:37

【问题描述】：

我开发了登录应用程序，它运行良好，但我想让它更方便。我想做当我专注于密码输入区域并单击键盘上的输入按钮时，应该单击登录按钮。

但现在我必须用鼠标单击按钮或单击 Tab 键并回车。

我在互联网上搜索它，看起来很简单，但我不知道如何应用我的条件。

问题是我将登录按钮放在另一个组件 vue 文件中。

[main.vue]

 <div class="form-item">
 <label>ID</label>
   <input type="text" class="input-form" id="id" v-model="conn.user">
 </div>
  <div class="form-item">
  <label>Password</label>
 <input type="password" class="input-form" id="password" v-model="conn.password" @keyup.enter="trigger">
   </div>
  <div class="form-item">
 <ConnectionItem ref="sendReply" :key="conn.uuid" :conn="conn" @connect="connect" @disconnect="disconnect" />
</div>

[ConnectionItem.vue]

  <div class="item">
    <div class="form-item">
<button class="login" v-show="showConnectButton" :class=" 'success': isConnected, 'connecting- 
 disconnecting': isConnectingOrDisconnecting " :disabled="isConnectingOrDisconnecting"  
 @click="$emit(isConnected ? 'disconnect' : 'connect', conn)">isConnected ? 'disconnect' : 'login' 
 </button>
      </div>
  </div>

起初我尝试使用 this.$refs.sendReply.click() 方法 ref="sendReply" 但它会导致这样的错误[错误消息]

vue.esm.js?a026:628 [Vue warn]: Error in v-on handler: "TypeError: this.$refs.sendReply.click is not a function"

found in
---> <MainWindow> at src/renderer/components/MainWindow/index.vue
       <GeomecCloudManager> at src/renderer/App.vue
         <Root>

我认为它应该在某个地方连接 main.vue 和 connectionItem.vue 但我不知道这种情况。欢迎任何想法或关键字。谢谢;)

【参考方案1】：

有多种方法可以做到：

方法一：

将按键监听器绑定到输入字段。只有当文件被聚焦时才会触发该事件：

<input @keypress.enter="trigger()">

方法二：

表单组件打开时添加按键监听，关闭时移除。

在您取消注册监听器之前，该事件将触发：

data () 
  return 
    formIsOpened: false
  
,
watch: 
  formIsOpened (value) 
    if (value) 
      window.addEventListener('keypress', this.formEnterKeypressHandler)
    
    else if (!value) 
      window.removeEventListener('keypress', this.formEnterKeypressHandler)
    
  
,
methods: 
  formEnterKeypressHandler (event) 
    if (event.code === 'Enter') 
       this.trigger()
    
  ,
  trigger () 
    console.log('trigger')