原生JS封装vue Tab切换效果-前端开发

让我详细讲解一下“原生JS封装vue Tab切换效果”的攻略。

让我详细讲解一下“原生JS封装vue Tab切换效果”的攻略。

步骤一：HTML结构

首先，我们需要在HTML中定义tab的页面结构。通常，Tab菜单会使用<ul>和<li>标签，而每个Tab页的内容则使用<div>标签。示例如下：

<div class="tab">
  <ul class="tab-menu">
    <li class="active">Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active">Tab 1内容</div>
    <div class="tab-pane">Tab 2内容</div>
    <div class="tab-pane">Tab 3内容</div>
  </div>
</div>

其中，.tab-menu 是 Tab 菜单的容器，.tab-content 是 Tab 内容的容器，.tab-pane 是每一个 Tab 页的内容，.active 表示当前页面是激活状态。

步骤二：CSS样式

为了让 Tab 能够在页面中美观显示，我们需要对其进行CSS样式的设置。示例如下：

.tab {
  display: inline-block;
  width: 100%;
}

.tab-menu {
  list-style: none;
  padding: 0;
}

.tab-menu li {
  display: inline-block;
  padding: 10px;
  cursor: pointer;
}

.tab-menu li.active {
  background-color: #eee;
}

.tab-content {
  clear:both;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

其中，.tab 是 Tab 的容器，.tab-menu 是tabs的菜单，使用了 list-style:none; 去除默认列表的样式。.tab-menu li 设置了Tab菜单项的样式，使用了 cursor:pointer; 使鼠标移上去时改变指针位置。.tab-content 是直接包含Tab页的容器，.tab-pane 是每一个 Tab 页的容器，使用了display:none; 隐藏它们。最后.tab-pane.active 将当前被激活的面板显示出来。

步骤三：原生JS实现Tab切换效果

最重要的一步是实现JS。我们通过封装Tab组件的方式将JS代码编写在单独的文件中。示例如下：

class Tabs {
  constructor(el) {
    this.el = el;
    this.init();
  }

  init() {
    this.menuItems = Array.from(this.el.querySelectorAll('.tab-menu li'));
    this.contentItems = Array.from(this.el.querySelectorAll('.tab-pane'));

    this.bindEvents();
  }

  bindEvents() {
    this.menuItems.forEach((item, i) => {
      item.addEventListener('click', () => {
        this.activateTab(i);
      });
    });
  }

  activateTab(index) {
    this.menuItems.forEach(item => item.classList.remove('active'));
    this.contentItems.forEach(item => item.classList.remove('active'));

    const menuItem = this.menuItems[index];
    const contentItem = this.contentItems[index];

    menuItem.classList.add('active');
    contentItem.classList.add('active');
  }
}

在这段代码中，我们定义了一个Tabs类。它包含一个构造器，用于初始化Tab组件，并且初始化函数用于找到所有菜单项和内容项。同时定义了 activateTab 函数用于激活指定的 tab。

在 bindEvents 函数中，我们遍历所有菜单项，并给每个菜单项添加了一个点击事件监听器，当这个菜单项被点击时，我们调用 activateTab 方法，将其所对应的tab激活。

接下来，我们需要在页面中使用 new Tabs() 来初始化Tab。示例如下：

const tabEl = document.querySelector('.tab');
new Tabs(tabEl);

在这个例子中，我们首先找到所有class为tab的元素，然后通过 new Tabs() 来初始化Tabs组件。

示例说明一

在这个例子中，我们将上述代码 CSS 及 HTML 整合在一起，创建了一个Tab切换效果。示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tab示例1</title>
  <style>
    .tab {
      display: inline-block;
      width: 100%;
    }

    .tab-menu {
      list-style: none;
      padding: 0;
    }

    .tab-menu li {
      display: inline-block;
      padding: 10px;
      cursor: pointer;
    }

    .tab-menu li.active {
      background-color: #eee;
    }

    .tab-content {
      clear:both;
    }

    .tab-pane {
      display: none;
    }

    .tab-pane.active {
      display: block;
    }
  </style>
</head>
<body>
  <div class="tab">
    <ul class="tab-menu">
      <li class="active">Tab 1</li>
      <li>Tab 2</li>
      <li>Tab 3</li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane active">Tab 1内容</div>
      <div class="tab-pane">Tab 2内容</div>
      <div class="tab-pane">Tab 3内容</div>
    </div>
  </div>

  <script>
    class Tabs {
      constructor(el) {
        this.el = el;
        this.init();
      }

      init() {
        this.menuItems = Array.from(this.el.querySelectorAll('.tab-menu li'));
        this.contentItems = Array.from(this.el.querySelectorAll('.tab-pane'));

        this.bindEvents();
      }

      bindEvents() {
        this.menuItems.forEach((item, i) => {
          item.addEventListener('click', () => {
            this.activateTab(i);
          });
        });
      }

      activateTab(index) {
        this.menuItems.forEach(item => item.classList.remove('active'));
        this.contentItems.forEach(item => item.classList.remove('active'));

        const menuItem = this.menuItems[index];
        const contentItem = this.contentItems[index];

        menuItem.classList.add('active');
        contentItem.classList.add('active');
      }
    }

    const tabEl = document.querySelector('.tab');
    new Tabs(tabEl);
  </script>
</body>
</html>

示例说明二

在这个例子中，我们扩展了上述的示例，使用Vue.js来实现Tab切换。示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tab示例2</title>
  <style>
    .tab {
      display: inline-block;
      width: 100%;
    }

    .tab-menu {
      list-style: none;
      padding: 0;
    }

    .tab-menu li {
      display: inline-block;
      padding: 10px;
      cursor: pointer;
    }

    .tab-menu li.active {
      background-color: #eee;
    }

    .tab-content {
      clear:both;
    }

    .tab-pane {
      display: none;
    }

    .tab-pane.active {
      display: block;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="tab">
      <ul class="tab-menu">
        <li v-for="(tab, index) in tabs"
            @click="activeTab(index)"
            :class="{ active: currentTabIndex === index }">{{ tab.title }}</li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane" v-for="(tab, index) in tabs" :class="{ active: currentTabIndex === index }">{{ tab.content }}</div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        tabs: [
          {
            title: 'Tab 1',
            content: '这里是Tab 1的内容'
          },
          {
            title: 'Tab 2',
            content: '这里是Tab 2的内容'
          },
          {
            title: 'Tab 3',
            content: '这里是Tab 3的内容'
          }
        ],
        currentTabIndex: 0
      },
      methods: {
        activeTab(index) {
          this.currentTabIndex = index;
        }
      }
    });
  </script>
</body>
</html>

在这个例子中，我们使用了Vue.js 通过绑定 v-for 和 v-bind 来渲染Tab菜单项和Tab页面，v-bind 和 v-on 来绑定激活Tab的事件监听和数据。这种方式和上述纯JS实现Tab的方式几乎相同，但它提供了更好的可维护性和可重用性。