uniapp confirm-type为send时触发是怎么回事？

在uniapp中，当input组件的confirm-type设置为"send"时，点击键盘的发送按钮会触发什么事件？我试了@confirm事件但没反应，正确的监听方式是什么？需要额外配置吗？

2 回复

uniapp中confirm-type="send"用于聊天输入框，点击发送按钮时触发发送事件。需搭配@confirm事件监听，在用户点击发送时执行相应逻辑。


在uni-app中，confirm-type 是 <input> 或 <textarea> 组件的一个属性，用于设置键盘右下角按钮的文本。当设置为 "send" 时，键盘按钮会显示为“发送”。

触发机制：

  • 点击发送按钮触发：用户点击键盘右下角的“发送”按钮时，会触发输入框的 confirm 事件（或表单的 submit 事件）。
  • 适用于聊天、评论等场景：方便用户快速提交内容，无需额外点击界面中的发送按钮。

使用方法：

  1. 在模板中设置 confirm-type="send"，并监听 confirm 事件。
  2. 在事件处理函数中执行发送逻辑，如提交数据到服务器或处理输入内容。

示例代码：

<template>
  <view>
    <input 
      confirm-type="send" 
      @confirm="handleSend" 
      v-model="inputValue" 
      placeholder="输入内容后点击发送"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleSend() {
      // 在这里处理发送逻辑
      if (this.inputValue.trim()) {
        console.log('发送内容:', this.inputValue);
        // 例如调用API发送消息
        // this.sendMessage(this.inputValue);
        this.inputValue = ''; // 清空输入框
      }
    }
  }
};
</script>

注意事项：

  • 平台差异：confirm-type="send" 在微信小程序等平台有效，但部分平台可能显示为“完成”或使用默认按钮。
  • 键盘类型：确保输入框的 type 属性适合内容（如 text 默认类型）。
  • 表单提交：如果输入框在 <form> 内，可能同时触发表单的 submit 事件。

通过以上配置，即可实现点击键盘“发送”按钮触发自定义逻辑。

回到顶部