内测018:管理端实现动态Tab

#Quiz #Web #Admin #Vue #Tab

WebAdmin都应该具有的如菜单，Tab页，及其关闭，恢复，拖拽，与菜单联动。 团队使用es6语法，Airbnb约定，尽量靠近现有规则实现视频演示效果

@高坤 @史荣久 / 2020-03-11 / CC-BY-SA-3.0

1.功能演示

如下视频演示了Web Admin上，都应该具有的功能，如以下名词和视频效果。

• side menu: 左侧菜单
• menu tabs: 上方多tabs的组件 (即要实现的功能)
• 视频地址，以备不时之需。
• git clone 项目地址

2.任务说明

虽然，演示视频和工程使用了iView组件库，但可以自由选型。

以下是当前的团队规则和技术栈，建议保持一致，

• 使用es6语法，文件系统区分大小写
• 使用eslint的Airbnb规则
• 使用vue及相关技术栈
• 类/组建等使用PascalCase命名
• 包/css等使用kebab-case命名

3.阶段要求

请先通读，通读，通读，以下全文, 再开始编码，根据情况通关。

①阶段，基本功能

• 默认显示一个 Home tab
• 点击side menu切到新route时, 会创建对应的tab添加到menu tabs组件上
• side menu与menu tabs的active状态需要联动
• 使用浏览器的前进和后退时, side menu 与 menu tabs 会与之联动
• tab可关闭
• 只剩一个tab时, 不可关闭 (最少保留一个tab)

②阶段，组件缓存

• 打开tab的同时, 缓存子页面的组件. 关闭tab时, 销毁组件.
• 请在组件的生命周期钩子给出console.log输出, 以表示组件被正确的创建和销毁

③阶段，状态恢复

• 刷新页面后, menu tabs可恢复之前状态
• 即: 若打开2个tabs, 刷新后依然显示这2个tabs

④阶段，附加功能

• 可对menu tabs拖拽排序
• tab支持右键菜单, 只有一个选项 ‘Close Others’: 关闭其他tab页

4.直接上手

# 好像有段时间 github 被墙了
git clone https://github.com/moilioncircle/vue-interview-test.git
# npm或yarn都可以的
yarn run serve

–

※ 我们的征途是星辰大海 ※

题图：照片上，你有个娃，娃有只猫，猫有个机器人，满足。实际中，你教育娃，娃教育猫，猫教育机器人，满地是足