打造流畅导航体验：使用Vue3.2 + ElementPlus + Pinia实现多页签

前端

2022-12-13 02:13:26

打造无缝的多页签导航：使用 Vue3、ElementPlus 和 Pinia

简介

在现代 Web 应用程序中，多页签导航已成为必不可少的元素，它让用户能在多个选项卡之间无缝切换，提升了效率和用户体验。本文将深入浅出地指导您使用 Vue3.2、ElementPlus 和 Pinia 构建一个功能强大的多页签导航系统。

实现原理

我们的多页签导航系统将建立在 Vue3.2 的基础上，并利用 ElementPlus 作为 UI 组件库。为了在组件间共享数据，我们将借助 Pinia。

当用户点击菜单时，我们会向存储库对象添加数据。不过，在添加之前，我们需要进行去重和数量限制检查，确保数据的可靠性和可控性。

数据处理

对于数据处理，我们将使用 Pinia 提供的 useStore() 钩子来访问存储库，并使用 add、update 和 remove 等方法进行数据操作。

import { defineStore } from 'pinia'

export const useTabStore = defineStore('tab', {
  state: () => ({
    tabs: []
  }),
  actions: {
    addTab(tab) {
      const index = this.tabs.findIndex(item => item.path === tab.path)
      if (index === -1) {
        this.tabs.push(tab)
      } else {
        this.tabs[index] = tab
      }
    },
    updateTab(tab) {
      const index = this.tabs.findIndex(item => item.path === tab.path)
      if (index !== -1) {
        this.tabs[index] = tab
      }
    },
    removeTab(tab) {
      const index = this.tabs.findIndex(item => item.path === tab.path)
      if (index !== -1) {
        this.tabs.splice(index, 1)
      }
    }
  }
})

页签渲染

在页签渲染方面，我们将使用 ElementPlus 提供的 ElTabs 和 ElTabPane 组件来构建导航栏。

<template>
  <el-tabs v-model="activeTab" @tab-click="handleTabClick">
    <el-tab-pane v-for="tab in tabs" :key="tab.path" :label="tab.title">
      <component :is="tab.component" />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { useTabStore } from '@/store/tab'
import { computed } from 'vue'

export default {
  setup() {
    const tabStore = useTabStore()
    const tabs = computed(() => tabStore.tabs)
    const activeTab = computed({
      get() {
        return tabStore.activeTab
      },
      set(val) {
        tabStore.activeTab = val
      }
    })

    const handleTabClick = (tab) => {
      tabStore.activeTab = tab.name
    }

    return {
      tabs,
      activeTab,
      handleTabClick
    }
  }
}
</script>