vue 实现横向滑动菜单

Vue实现横向滑动菜单可以使用第三方组件库，如Element UI或是Mint UI等。以下是使用Element UI实现横向滑动菜单的示例代码：

<template>
  <div class="menu-wrapper">
    <el-scrollbar wrap-class="menu-list-wrapper">
      <ul class="menu-list">
        <li class="menu-item" v-for="(item, index) in menuList" :key="index">
          <router-link :to="item.link">{{item.name}}</router-link>
        </li>
      </ul>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuList: [
        { name: '首页', link: '/' },
        { name: '产品', link: '/product' },
        { name: '服务', link: '/service' },
        { name: '关于我们', link: '/about' },
      ],
    };
  },
};
</script>

<style scoped>
.menu-wrapper {
  height: 40px;
  overflow: hidden;
}

.menu-list-wrapper {
  height: 40px;
  padding: 0 20px;
}

.menu-list {
  display: flex;
  align-items: center;
  height: 100%;
}

.menu-item {
  margin-right: 20px;
}

.menu-item:last-child {
  margin-right: 0;
}

.menu-item a {
  color: #333;
  font-size: 14px;
}
</style>

该示例中使用了Element UI提供的Scrollbar组件，将菜单列表包裹在其中，并设置了wrap-class为menu-list-wrapper。同时，在样式中设置了.menu-wrapper的高度为40px，实现了横向滑动菜单的效果。使用router-link实现路由跳转。