vue iframe 实现tab

使用 Vue 和 iframe 实现 Tab 功能

在 Vue 中结合 iframe 实现 Tab 功能，可以通过动态加载不同的 iframe 内容来切换 Tab。以下是一个完整的实现方法：

创建基础组件结构

<template>
  <div>
    <div class="tabs">
      <button 
        v-for="(tab, index) in tabs" 
        :key="index"
        @click="activateTab(index)"
        :class="{ active: activeTab === index }"
      >
        {{ tab.title }}
      </button>
    </div>

    <div class="tab-content">
      <iframe 
        v-for="(tab, index) in tabs" 
        :key="index"
        :src="tab.src"
        v-show="activeTab === index"
        frameborder="0"
      ></iframe>
    </div>
  </div>
</template>

设置组件数据和方法

<script>
export default {
  data() {
    return {
      activeTab: 0,
      tabs: [
        { title: 'Tab 1', src: 'https://example.com/page1' },
        { title: 'Tab 2', src: 'https://example.com/page2' },
        { title: 'Tab 3', src: 'https://example.com/page3' }
      ]
    }
  },
  methods: {
    activateTab(index) {
      this.activeTab = index
    }
  }
}
</script>

添加样式

<style scoped>
.tabs {
  display: flex;
  margin-bottom: 10px;
}

.tabs button {
  padding: 10px 20px;
  background: #eee;
  border: none;
  cursor: pointer;
  margin-right: 5px;
}

.tabs button.active {
  background: #ddd;
  font-weight: bold;
}

.tab-content {
  width: 100%;
  height: 500px;
}

.tab-content iframe {
  width: 100%;
  height: 100%;
}
</style>

优化性能考虑

为了避免频繁加载 iframe，可以添加 keep-alive 功能。修改模板部分：

<template>
  <div>
    <!-- 保持 tabs 按钮部分不变 -->

    <div class="tab-content">
      <iframe 
        v-for="(tab, index) in tabs" 
        :key="index"
        :src="activeTab === index ? tab.src : ''"
        v-show="activeTab === index"
        frameborder="0"
      ></iframe>
    </div>
  </div>
</template>

处理 iframe 加载状态

添加加载状态指示器：

<template>
  <div>
    <!-- 保持 tabs 按钮部分不变 -->

    <div class="tab-content">
      <div v-if="loading" class="loading">Loading...</div>
      <iframe 
        v-for="(tab, index) in tabs" 
        :key="index"
        :src="activeTab === index ? tab.src : ''"
        v-show="activeTab === index && !loading"
        @load="loading = false"
        @error="handleError"
        frameborder="0"
      ></iframe>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      // 其他数据保持不变
    }
  },
  methods: {
    activateTab(index) {
      this.loading = true
      this.activeTab = index
    },
    handleError() {
      this.loading = false
      console.error('Failed to load iframe content')
    }
  }
}
</script>

动态添加和移除 Tab

如果需要动态管理 Tab，可以添加相关方法：

methods: {
  addTab(title, url) {
    this.tabs.push({
      title: title,
      src: url
    })
  },
  removeTab(index) {
    if (this.activeTab === index) {
      this.activeTab = Math.max(0, index - 1)
    }
    this.tabs.splice(index, 1)
  }
}

这种实现方式提供了基本的 Tab 功能，同时考虑了性能和用户体验。可以根据具体需求进一步扩展功能。