Ionic 和 Vue 是否有特定的方法来获取鼠标位置？

Question

我正在寻找以像素为单位的鼠标 X 位置（Ionic 6/Vue/Typescript）以调整侧边栏菜单的大小。

我尝试文档中的代码：https://ionicframework.com/docs/utilities/gestures 但它不起作用。

关于我的功能

onMove

，我有一个错误：

Missing return type on function

.

<template>
  <ion-page>
    <ion-split-pane
      content-id="main"
    >
      <ion-menu
        content-id="main"
        class="sidebar"
      >
        <ion-content class="ion-padding ">
          // my content
        </ion-content>

        <div class="rectangle"></div>
        <p>
          Swipe to start tracking
        </p>

        <!-- in order to resize the menu -->
        <div class="sidebar__side"></div>
      </ion-menu>

      <ion-router-outlet id="main" />
    </ion-split-pane>
  </ion-page>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { createGesture } from '@ionic/core';

// get mouse x position in pixel while clicking
const pRef = ref();
const rectangleRef = ref();
const gesture = createGesture({
  el: rectangleRef.value,
  onMove: (detail) => { onMove(detail); }
})

gesture.enable();

function onMove(detail) {
  const type = detail.type;
  const currentX = detail.currentX;
  const deltaX = detail.deltaX;

  return pRef.value.innerHTML = `
    <div>Type: ${type}</div>
    <div>Current X: ${currentX}</div>
    <div>Delta X: ${deltaX}</div>`
}


</script>

<style lang="scss" scoped>

.rectangle {
  width: 500px;
  height: 100px;
  background: rgba(0, 0, 255, 0.5);
}

.split-pane-visible {
  --side-min-width: 200px;
  --side-max-width: 800px;
  --side-width: 300px;
  overflow: visible;
}

</style>