vue3 封装一个横向滚动条，不显示滚动条，但是可以用鼠标或者手指滚动，需兼容Mac等浏览器，并举例

可以在 Vue3 中使用自定义指令来封装横向滚动条。首先，在 main.js 中定义指令：

Vue.directive('horizontal-scroll', {
  bind(el, binding) {
    el.addEventListener('wheel', e => {
      if (e.deltaY) {
        el.scrollLeft += e.deltaY;
      }
    });
  }
});

然后，在需要使用横向滚动条的元素上绑定该指令：

<div v-horizontal-scroll>...</div>

这样就可以在该元素上使用鼠标滚轮或手指滑动来滚动内容了。需要注意的是，上面的代码只能在主流浏览器中使用，如果需要兼容 Mac 浏览器，还需要添加触摸事件监听来实现。

另外，如果需要隐藏滚动条，可以使用 css 来实现，例如：

.horizontal-scroll {
  overflow-x: scroll;
  overflow-y: hidden;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

在上面的代码中，.horizontal-scroll 就是需要隐藏滚动条的元素，可以在绑定指令时使用该类名来实现隐藏。

<div class='horizontal-scroll' v-horizontal-scroll>...</div>

具体实现可能会有所不同，可能需要根据具体需求来进行调整。