uni-app:各种事件（点击事件、回车事件...）

• @tap: 单击事件
• @confirm: 回车事件
• @blur:失去焦点事件
• @touchstart: 触摸开始事件
• @touchmove: 触摸移动事件。
• @touchend: 触摸结束事件。
• @longpress: 长按事件。
• @input: 输入框内容变化事件。
• @change: 表单元素值变化事件。
• @submit: 表单提交事件。
• @scroll: 滚动事件。
• @touchmove: 触摸移动事件。
• @touchend: 触摸结束事件。
• @longpress: 长按事件。
• @input: 输入框内容变化事件。
• @change: 表单元素值变化事件。
• @submit: 表单提交事件。
• @scroll: 滚动事件。
• @scrolltoupper: 滚动到顶部事件，当滚动条滚动到顶部时触发。
• @scrolltolower: 滚动到底部事件，当滚动条滚动到底部时触发。
• @touchforcechange: 触摸压力变化事件，当触摸设备的压力值发生变化时触发。
• @error: 图片加载失败事件，在图片加载失败时触发。
• @load: 图片加载成功事件，在图片加载成功时触发。
• @resize: 窗口尺寸变化事件，当窗口大小发生变化时触发。
• @backbutton: 后退按钮点击事件，当用户点击后退按钮时触发。

......

部分案例 

单击事件

<template>
  <view>
    <button @tap="handleTap">点击我</button>
  </view>
</template>

<script>
export default {
  methods: {
    handleTap() {
      console.log("单击事件");
    }
  }
};
</script>

回车事件

写法1

<template>
  <view>
    <input type="text" @confirm="handleConfirm" />
  </view>
</template>

<script>
export default {
  methods: {
    handleConfirm(event) {
      console.log('按下回车键');
      console.log('输入框的值：', event.target.value);
    }
  }
};
</script>

写法2

<template>
  <view>
    <input type="text" v-model="inputValue" @confirm="handleEnter" />
  </view>
</template>

<script>
    export default {
      data() {
        return {
          inputValue: ''
        };
      },
      methods: {
        handleEnter() {
          console.log(this.inputValue); // 输出文本框内容
      
          // 执行其他逻辑操作
      
          // 清空文本框内容
          this.inputValue = '';
        }
      }
};
</script>

失去焦点

<template>
  <view>
    <input v-model="inputValue" @blur="handleBlur" />
    <text>{
   
   { inputValue }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleBlur() {
      console.log(this.inputValue); // 获取输入框的值
      // 处理失去焦点事件的逻辑
    }
  }
};
</script>