分类选择

Vue

实现方式

使用第三方组件

• 类别选择组件

  • tab组件

    • 组件切换的交互逻辑已经内置在组件内部, 用户无需配置, 保持默认即可
    • 只需要在el-tab-pane组件的插槽中插入想要显示的html标签就可以了
    • 非常简单简洁容易使用

    示例

      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="User" name="first">User</el-tab-pane>
        <el-tab-pane label="Config" name="second">Config</el-tab-pane>
        <el-tab-pane label="Role" name="third">Role</el-tab-pane>
        <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
      </el-tabs>

    指向原始笔记的链接

  • 菜单组件

    • 通过配置路由path来完成内容显示切换逻辑
    • 使用菜单项中的index属性来指定切换后的路由path
    • https://element-plus.org/zh-CN/component/menu.html
    • 自带折叠功能
      • 把文字折叠, 只剩图标

    指向原始笔记的链接

  指向原始笔记的链接

使用导航栏实现

• 导航栏组件内部处理点击切换事件
  • 改变导航栏样式
• 导航栏向上级组件抛出事件及参数
  • 上级组件监听到事件后，执行对应的业务逻辑
  • 并根据结果更新页面