uni-app: various events (click event, carriage return event...)

• @tap: click event
• @confirm: carriage return event
• @blur:out of focus event
• @touchstart: touch start event
• @touchmove: Touch move event.
• @touchend: Touch end event.
• @longpress: Long press event.
• @input: Input box content change event.
• @change: Form element value change event.
• @submit: form submit event.
• @scroll: Scroll event.
• @touchmove: Touch move event.
• @touchend: Touch end event.
• @longpress: Long press event.
• @input: Input box content change event.
• @change: Form element value change event.
• @submit: form submit event.
• @scroll: Scroll event.
• @scrolltoupper: Scroll to top event, triggered when the scroll bar scrolls to the top.
• @scrolltolower: Scroll to bottom event, triggered when the scroll bar scrolls to the bottom.
• @touchforcechange: Touch pressure change event, triggered when the pressure value of the touch device changes.
• @error: Image loading failure event, triggered when the image loading fails.
• @load: Image loading success event, triggered when the image is loaded successfully.
• @resize: Window size change event, triggered when the window size changes.
• @backbutton: Back button click event, triggered when the user clicks the back button.

......

Some cases 

click event

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

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

carriage return event

Writing 1

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

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

Writing 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>

lose focus

<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>