如何在Vue或其他框架中使用rxjs定制longpress指令？

import { fromEvent } from 'rxjs';
import { takeUntil, filter, switchMap } from 'rxjs/operators';

Vue.directive('longpress', {
  bind: function (el, binding) {
    let pressTimer = null;

    // 创建一个鼠标按下事件的Observable
    const mousedown$ = fromEvent(el, 'mousedown');
    // 创建一个鼠标松开事件的Observable
    const mouseup$ = fromEvent(document, 'mouseup');

    // 监听鼠标按下事件
    mousedown$.subscribe((event) => {
      // 使用setTimeout设置长按的时间阈值，例如1000ms
      pressTimer = setTimeout(() => {
        // 当长按时间达到阈值时，触发指令绑定的方法
        binding.value(event);
      }, 1000);
    });

    // 监听鼠标松开事件
    mouseup$.subscribe(() => {
      // 清除定时器
      clearTimeout(pressTimer);
    });
  },
});

<template>
  <div>
    <button v-longpress="handleLongPress">长按我</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleLongPress(event) {
      // 处理长按事件的逻辑
      console.log('长按事件触发', event);
    },
  },
};
</script>