Dom和组件事件遵循Vue标准,可参考Vue事件文档:事件处理,组件自定义事件
事件对象:所有事件对象统一拥有以下参数

  1. {
  2. type:String, //事件类型
  3. target:Object, //事件对象,交互事件为事件触发的元素.全局/模块事件为事件触发对应的全局/模块对象
  4. timestamp:number, //事件触发时间戳
  5. data:Object|Number... //可选,事件触发时需要传递的参数,参数名[data]根据事件类型可自定义
  6. }

1.交互响应事件

事件类型 说明
click 点击事件
longpress 长按事件

用户点击/长按/滑动等操作元素的事件,作用于元素/组件上.

  1. <template>
  2. <div class="btn" @click="handleClick">
  3. <text class="btn-text">click</text>
  4. </div>
  5. <div class="btn" @longpress="handleLongPress">
  6. <text class="btn-text">longpress</text>
  7. </div>
  8. </template>
  9. <script>
  10. export default {
  11. methods: {
  12. handleDisappear(e, id) {
  13. console.log(`
  14. ${e.timestamp}
  15. ${id} disappear
  16. ${e.direction}
  17. `);
  18. },
  19. handleClick(e) {
  20. console.log(e.timestamp + ': click');
  21. },
  22. handleLongPress(e) {
  23. console.log(e.timestamp + ': longpress');
  24. }
  25. }
  26. };
  27. </script>