【css js vue】超详细！！实现 tab菜单 动态滑动效果

<template>
  <div class="tabs-container">
    <div class="tabs-header" ref="tabsHeader">
      <div
        class="tab-item"
        v-for="(tab, index) in tabs"
        :key="index"
        :class="{ 'active': tab.isActive }"
        @click="selectTab(index)"
      >
        {{ tab.title }}
      </div>
    </div>
    <div class="tabs-content">
      <slot></slot>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      tabs: [],
    };
  },
  methods: {
    selectTab(index) {
      this.tabs.forEach((tab, i) => {
        tab.isActive = (i === index);
      });
      this.$emit('update:activeIndex', index);
      this.scrollHeader(index);
    },
    scrollHeader(index) {
      const tabsHeader = this.$refs.tabsHeader;
      const tabItem = tabsHeader.querySelectorAll('.tab-item')[index];
      if (!tabItem) return;
      const tabOffsetLeft = tabItem.offsetLeft;
      const tabsContainerWidth = tabsHeader.clientWidth;
      const tabWidth = tabItem.clientWidth;
      if (tabsContainerWidth - tabOffsetLeft < tabWidth) {
        tabsHeader.scrollLeft = tabOffsetLeft + tabWidth - tabsContainerWidth;
      } else if (tabOffsetLeft > 0) {
        tabsHeader.scrollLeft = tabOffsetLeft;
      }
    },
    addTab(tab) {
      if (tab.title && tab.name) {
        this.tabs.push(tab);
        this.selectTab(0);
      }
    },
    removeTab(name) {
      const index = this.tabs.findIndex(tab => tab.name === name);
      if (index !== -1) {
        this.tabs.splice(index, 1);
      }
    }
  },
  mounted() {
    this.$parent.$on('addTab', this.addTab);
    this.$parent.$on('removeTab', this.removeTab);
  },
  beforeDestroy() {
    this.$parent.$off('addTab', this.addTab);
    this.$parent.$off('removeTab', this.removeTab);
  }
};
</script>
 
<style scoped>
.tabs-container {
  width: 100%;
}
.tabs-header {
  overflow: auto;
  white-space: nowrap;
}
.tab-item {
  display: inline-block;
  padding: 5px 10px;
  cursor: pointer;
  border: 1px solid transparent;
}
.tab-item.active {
  border-color: #ddd;
  background-color: #fff;
}
.tabs-content {
  border: 1px solid #ddd;
  padding: 10px;
}
</style>

这个代码实例提供了一个可复用的Vue组件，用于创建带有动态滑动效果的标签菜单。组件包括添加、移除标签项的功能，并在标签过多时可以滑动查看。这是一个教育性很强的实例，展示了如何在Vue中管理和控制DOM元素。