使用vue3写一个菜单栏滑动组件

好的，我可以帮你编写一个使用 Vue 3 的菜单栏滑动组件。以下是一个简单的示例：

<template>
  <div class="menu-container">
    <div class="menu" ref="menu" @mousemove="handleMouseMove">
      <!-- 菜单项 -->
      <div class="menu-item" v-for="(item, index) in menuItems" :key="index">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  data() {
    return {
      menuItems: ['菜单项1', '菜单项2', '菜单项3', '菜单项4', '菜单项5'], // 菜单项数组
      menuWidth: 0, // 菜单宽度
      mouseX: 0, // 鼠标X轴位置
    };
  },
  mounted() {
    this.menuWidth = this.$refs.menu.offsetWidth;
  },
  methods: {
    handleMouseMove(event) {
      this.mouseX = event.clientX;
    },
  },
  computed: {
    menuPosition() {
      const containerWidth = this.$el.offsetWidth;
      const maxTranslateX = containerWidth - this.menuWidth;
      const translateX = (this.mouseX / containerWidth) * maxTranslateX;

      return `translateX(-${translateX}px)`;
    },
  },
};
</script>

<style>
.menu-container {
  width: 100%;
  overflow: hidden;
}

.menu {
  display: flex;
  transition: transform 0.3s ease;
  white-space: nowrap;
}

.menu-item {
  padding: 10px;
}
</style>

在上述示例中，我们使用了 Vue 3 的 Composition API，通过 `ref` 创建了响应式的 `menuWidth` 和 `mouseX` 变量。`menuWidth` 用于保存菜单的宽度，`mouseX` 用于保存鼠标的 X 轴位置。

通过监听菜单容器的 `mousemove` 事件，我们可以实时更新 `mouseX` 的值。然后，通过计算属性 `menuPosition`，我们根据鼠标的位置计算出需要应用到菜单项容器的 `transform` 样式，实现菜单项的滑动效果。

最后，我们在模板中使用 `v-for` 循环渲染菜单项，并将计算出的 `menuPosition` 应用到菜单项容器上。

这只是一个简单的示例，你可以根据自己的需求进行修改和扩展。希望对你有所帮助！