Vite2 + vue3 + TS + ElementPlus 构建后台管理系统——Breadcrumb 和 TagsView

2024-01-16 06:08:51

准备工作

在开始之前，请确保你已经完成了上一章的内容，并且已经安装了 Vite2、vue3、TypeScript 和 ElementPlus。

面包屑组件

面包屑组件用于显示用户当前所处的页面位置，它可以帮助用户快速了解自己的位置，并方便他们返回到之前的页面。

安装依赖

首先，我们需要安装面包屑组件的依赖：

npm install element-plus

创建组件

在 src/components 目录下创建一个 Breadcrumb.vue 文件，并添加以下代码：

<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    <el-breadcrumb-item>用户列表</el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
export default {
  name: 'Breadcrumb',
  props: {
    routes: {
      type: Array,
      required: true
    }
  },
  computed: {
    breadcrumbList() {
      return this.routes.map(route => {
        return {
          path: route.path,
          name: route.name
        }
      })
    }
  }
}
</script>

使用组件

在需要使用面包屑组件的地方，我们可以直接引入 Breadcrumb.vue 组件，并传入 routes 属性。例如，在 src/views/Home.vue 文件中，我们可以添加以下代码：

<template>
  <div>
    <Breadcrumb :routes="routes" />
    <h1>首页</h1>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb.vue'

export default {
  name: 'Home',
  components: {
    Breadcrumb
  },
  data() {
    return {
      routes: [
        {
          path: '/',
          name: '首页'
        }
      ]
    }
  }
}
</script>

标签页组件

标签页组件用于显示当前打开的多个页面，它可以帮助用户快速切换到不同的页面，并方便地管理多个页面。

安装依赖

首先，我们需要安装标签页组件的依赖：

npm install element-plus

创建组件

在 src/components 目录下创建一个 TagsView.vue 文件，并添加以下代码：

<template>
  <el-tabs v-model="activeIndex" @tab-click="handleClick">
    <el-tab-pane v-for="tag in tagsViewList" :key="tag.path" :label="tag.name" :name="tag.path">
      <router-view />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'

export default {
  name: 'TagsView',
  setup() {
    const route = useRoute()
    const activeIndex = ref(route.path)
    const tagsViewList = computed(() => {
      const matched = route.matched
      return matched.map(item => {
        return {
          path: item.path,
          name: item.meta.title
        }
      })
    })

    const handleClick = (tab, event) => {
      activeIndex.value = tab.name
    }

    return {
      activeIndex,
      tagsViewList,
      handleClick
    }
  }
}
</script>

使用组件

在需要使用标签页组件的地方，我们可以直接引入 TagsView.vue 组件。例如，在 src/views/Layout.vue 文件中，我们可以添加以下代码：

<template>
  <div class="layout">
    <Header />
    <Sidebar />
    <div class="main">
      <TagsView />
      <router-view />
    </div>
  </div>
</template>

<script>
import Header from '@/components/Header.vue'
import Sidebar from '@/components/Sidebar.vue'
import TagsView from '@/components/TagsView.vue'

export default {
  name: 'Layout',
  components: {
    Header,
    Sidebar,
    TagsView
  }
}
</script>