当前位置:   article > 正文

如何用Vue3 + TypeScript 封装侧边栏el-menu菜单组件_vue3+ts 侧边导航栏的配置

vue3+ts 侧边导航栏的配置

如何用Vue3 + TypeScript 封装侧边栏el-menu菜单组件

前端开发中,侧边栏是一个常见的组件,通常用于显示导航菜单、栏目分类等内容。本文将介绍如何使用 Vue3 和 TypeScript 来封装一个递归生成侧边栏菜单的组件。

1. 创建侧边栏组件

我们首先需要创建一个 Vue 组件来实现侧边栏的功能。在这个组件中,我们需要接收一个配置对象作为参数,然后根据配置对象来递归生成侧边栏菜单。

vue

Copy

<template>
  <ul>
    <li v-for="item in menu" :key="item.id">
      <a :href="item.link">{{ item.label }}</a>
      <sidebar v-if="item.children" :menu="item.children"></sidebar>
    </li>
  </ul>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'

interface Menu {
  id: number
  label: string
  link?: string
  children?: Menu[]
}

export default defineComponent({
  name: 'Sidebar',
  props: {
    menu: {
      type: Array as PropType<Menu[]>,
      required: true,
      default: () => []
    }
  }
})
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

在这个组件中,我们使用了一个名为 menu 的 props 属性来接收配置对象。在组件的模板中,我们使用 v-for 指令来遍历 menu 数组,并生成对应的侧边栏菜单。如果某个菜单项有子菜单项,那么我们会递归渲染 Sidebar 组件来生成子菜单项。

2. 使用侧边栏组件

在创建好侧边栏组件之后,我们可以在其他组件中使用它。例如,我们可以在 App.vue 组件中使用侧边栏组件来显示导航菜单。

vue

Copy

<template>
  <div>
    <sidebar :menu="menu"></sidebar>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import Sidebar from './Sidebar.vue'

interface Menu {
  id: number
  label: string
  link?: string
  children?: Menu[]
}

export default defineComponent({
  name: 'App',
  components: {
    Sidebar
  },
  setup() {
    const menu = ref<Menu[]>([
      {
        id: 1,
        label: '菜单项1',
        link: '/menu1'
      },
      {
        id: 2,
        label: '菜单项2',
        link: '/menu2',
        children: [
          {
            id: 3,
            label: '子菜单项1',
            link: '/submenu1'
          },
          {
            id: 4,
            label: '子菜单项2',
            link: '/submenu2'
          }
        ]
      }
    ])

    return { menu }
  }
})
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52

在这个示例中,我们在 App.vue 组件中使用了 ref 来定义一个名为 menu 的响应式变量,其中包含了两个菜单项。第二个菜单项包含了两个子菜单项,因此它会递归生成子菜单项。我们将这个 menu 变量作为 props 传递给侧边栏组件,从而生成对应的侧边栏菜单。

3. 总结

在本文中,我们介绍了如何使用 Vue3 和 TypeScript 来封装一个递归生成侧边栏菜单的组件。通过这个组件,我们可以方便地生成各种复杂的侧边栏菜单,从而提高我们的开发效率。同时,使用 TypeScript 进行类型检查可以让我们在开发过程中更加安全地使用组件。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/煮酒与君饮/article/detail/971773
推荐阅读
相关标签
  

闽ICP备14008679号