mirror of https://github.com/ElemeFE/element
component nav
baiyaaaaa
parent
0d6fdd2bd6
commit
4247932988
|
|
@ -1,40 +1,86 @@
|
||||||
<style>
|
<style>
|
||||||
|
.side-nav {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-right: 1px solid #eaeefa;
|
||||||
|
|
||||||
|
li {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
a {
|
||||||
|
font-size:18px;
|
||||||
|
color:#5e6d82;
|
||||||
|
line-height: 32px;
|
||||||
|
height: 32px;
|
||||||
|
margin: 10px 0;
|
||||||
|
padding: 0 0 0 10px;
|
||||||
|
text-decoration: none;
|
||||||
|
border-left: 2px solid transparent;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: #20a0ff;
|
||||||
|
border-left-color: #20a0ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav-item {
|
||||||
|
a {
|
||||||
|
font-size: 14px;
|
||||||
|
padding-left: 20px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav-group__title {
|
||||||
|
color: #99a9bf;
|
||||||
|
padding-left: 15px;
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<template>
|
<template>
|
||||||
<div class="side-nav">
|
<div class="side-nav">
|
||||||
<ul>
|
<ul>
|
||||||
<li v-for="item in data">
|
<li class="nav-item" v-for="item in data">
|
||||||
<a href="">{{item.name}}</a>
|
<a>{{item.name}}</a>
|
||||||
|
<ul class="pure-menu-list sub-nav" v-if="item.children">
|
||||||
|
<li class="nav-item" v-for="navItem in item.children">
|
||||||
|
<router-link
|
||||||
|
class=""
|
||||||
|
active-class="active"
|
||||||
|
:to="'/component' + navItem.path"
|
||||||
|
exact
|
||||||
|
v-text="navItem.title || item.name">
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<template v-if="item.groups">
|
||||||
|
<div class="nav-group" v-for="group in item.groups">
|
||||||
|
<div class="nav-group__title">{{group.groupName}}</div>
|
||||||
|
<ul class="pure-menu-list">
|
||||||
|
<li
|
||||||
|
class="nav-item"
|
||||||
|
v-for="item in group.list"
|
||||||
|
v-if="!item.disabled">
|
||||||
|
<router-link
|
||||||
|
active-class="active"
|
||||||
|
:to="'/component' + item.path"
|
||||||
|
exact
|
||||||
|
v-text="item.title"></router-link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<template v-for="(nav, key) in navs">
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
@click.prevent="navState.$set(key, !navState[key] || false)"
|
|
||||||
class="pure-menu-heading app__menu__label"
|
|
||||||
:class="{ 'unfold': !navState[key] }"
|
|
||||||
v-text="nav.group"></a>
|
|
||||||
<ul
|
|
||||||
class="pure-menu-list"
|
|
||||||
transition="slidedown"
|
|
||||||
v-show="!navState[key]"
|
|
||||||
:style="{
|
|
||||||
maxHeight: nav.list.length * 44 + 'px'
|
|
||||||
}">
|
|
||||||
<li
|
|
||||||
class="pure-menu-item app__menu__item"
|
|
||||||
v-for="item in nav.list"
|
|
||||||
v-if="!item.disabled">
|
|
||||||
<router-link
|
|
||||||
class="pure-menu-link app__menu__link"
|
|
||||||
active-class="active"
|
|
||||||
:to="'/component' + item.path"
|
|
||||||
exact
|
|
||||||
v-text="item.name"></router-link>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</template>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
|
|
@ -1,237 +1,243 @@
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
"group": "Basic",
|
"name": "基础组件",
|
||||||
"list": [
|
"groups": [{
|
||||||
{
|
"groupName": "Basic",
|
||||||
"path": "/button",
|
"list": [
|
||||||
"name": "按钮 (button)",
|
{
|
||||||
"title": "Button 按钮",
|
"path": "/layout",
|
||||||
"description": "常用的操作按钮"
|
"name": "按钮 (button)",
|
||||||
},
|
"title": "Layout 布局",
|
||||||
{
|
"description": ""
|
||||||
"path": "/icon",
|
},
|
||||||
"name": "图标 (icon)",
|
{
|
||||||
"title": "Icon 图标"
|
"path": "/icon",
|
||||||
},
|
"name": "图标 (icon)",
|
||||||
{
|
"title": "Icon 图标"
|
||||||
"path": "/tag",
|
},
|
||||||
"name": "标签 (tag)",
|
{
|
||||||
"title": "Tag 标签",
|
"path": "/button",
|
||||||
"description": "Tag 标签"
|
"name": "按钮 (button)",
|
||||||
},
|
"title": "Button 按钮",
|
||||||
{
|
"description": "常用的操作按钮"
|
||||||
"path": "/dialog",
|
},
|
||||||
"name": "对话框 (dialog)",
|
{
|
||||||
"title": "Dialog 对话框",
|
"path": "/dialog",
|
||||||
"description": "在保留当前页面状态的情况下, 告知用户信息并承载相关操作。"
|
"name": "对话框 (dialog)",
|
||||||
},
|
"title": "Dialog 对话框",
|
||||||
{
|
"description": "在保留当前页面状态的情况下, 告知用户信息并承载相关操作。"
|
||||||
"path": "/message-box",
|
},
|
||||||
"name": "弹框 (message-box)",
|
{
|
||||||
"title": "message-box 弹框"
|
"path": "/message-box",
|
||||||
},
|
"name": "弹框 (message-box)",
|
||||||
{
|
"title": "message-box 弹框"
|
||||||
"path": "/popover",
|
},
|
||||||
"name": "弹出框 (popover)",
|
{
|
||||||
"title": "popover 弹出框",
|
"path": "/alert",
|
||||||
"description": "收纳具体内容和相关操作, 激活后弹出展现"
|
"name": "警告 (alert)",
|
||||||
},
|
"title": "alert 警告",
|
||||||
{
|
"description": "用于页面中展示重要的提示信息"
|
||||||
"path": "/tooltip",
|
},
|
||||||
"name": "文字提示 (tooltip)",
|
{
|
||||||
"title": "tooltip 文字提示",
|
"path": "/notification",
|
||||||
"description": "优雅地展示文字提示信息"
|
"name": "通知 (notification)",
|
||||||
},
|
"title": "notification 通知",
|
||||||
{
|
"description": "悬浮出现在页面右上角, 显示全局的通知提醒消息"
|
||||||
"path": "/alert",
|
},
|
||||||
"name": "警告 (alert)",
|
{
|
||||||
"title": "alert 警告",
|
"path": "/message",
|
||||||
"description": "用于页面中展示重要的提示信息"
|
"name": "消息提示 (message)",
|
||||||
},
|
"title": "message 消息提示",
|
||||||
{
|
"description": "对用户的操作进行反馈提示,包含成功、反馈或错误等消息提示"
|
||||||
"path": "/notification",
|
},
|
||||||
"name": "通知 (notification)",
|
{
|
||||||
"title": "notification 通知",
|
"path": "/loading",
|
||||||
"description": "悬浮出现在页面右上角, 显示全局的通知提醒消息"
|
"name": "加载 (loading)",
|
||||||
},
|
"title": "loading 加载",
|
||||||
{
|
"description": "加载数据时显示"
|
||||||
"path": "/message",
|
},
|
||||||
"name": "消息提示 (message)",
|
{
|
||||||
"title": "message 消息提示",
|
"path": "/card",
|
||||||
"description": "对用户的操作进行反馈提示,包含成功、反馈或错误等消息提示"
|
"name": "卡片 (card)",
|
||||||
},
|
"title": "card 卡片",
|
||||||
{
|
"description": "将信息聚合在卡片容器中展示"
|
||||||
"path": "/loading",
|
}
|
||||||
"name": "加载 (loading)",
|
]
|
||||||
"title": "loading 加载",
|
},
|
||||||
"description": "加载数据时显示"
|
{
|
||||||
},
|
"groupName": "Form",
|
||||||
{
|
"list": [
|
||||||
"path": "/card",
|
{
|
||||||
"name": "卡片 (card)",
|
"path": "/radio",
|
||||||
"title": "card 卡片",
|
"name": "单选框 (radio)",
|
||||||
"description": "将信息聚合在卡片容器中展示"
|
"title": "Radio 单选框",
|
||||||
}
|
"description": "用于在多个备选项选中单个选项。"
|
||||||
]
|
},
|
||||||
|
{
|
||||||
|
"path": "/checkbox",
|
||||||
|
"name": "多选框 (checkbox)",
|
||||||
|
"title": "Checkbox 多选框",
|
||||||
|
"description": "用于在多个可选项中进行多项选择。"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/input",
|
||||||
|
"name": "输入框 (input)",
|
||||||
|
"title": "Input 输入框"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/input-number",
|
||||||
|
"name": "计数器 (input-number)",
|
||||||
|
"title": "Input Number 计数器"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/select",
|
||||||
|
"name": "选择器 (select)",
|
||||||
|
"title": "Select 选择器",
|
||||||
|
"description": "当选项过多时, 使用下拉菜单展示并选择内容"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/switch",
|
||||||
|
"name": "开关 (switch)",
|
||||||
|
"title": "Switch 开关",
|
||||||
|
"description": "用于两种对立状态的切换。"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/slider",
|
||||||
|
"name": "滑块 (slider)",
|
||||||
|
"title": "Slider 滑块",
|
||||||
|
"description": "通过拖动滑块在一个固定区间内进行选择"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/time-picker",
|
||||||
|
"name": "时间选择器（time-picker）",
|
||||||
|
"title": "TimePicker 时间选择器",
|
||||||
|
"description": "用于选择或输入时间"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/date-picker",
|
||||||
|
"name": "日期选择器（date-picker）",
|
||||||
|
"title": "DatePicker",
|
||||||
|
"description": "用于选择或输入时间"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/datetime-picker",
|
||||||
|
"name": "日期时间选择器",
|
||||||
|
"title": "DatetimePicker",
|
||||||
|
"description": "用于选择或输入日期时间"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/upload",
|
||||||
|
"name": "上传 (upload)",
|
||||||
|
"title": "Upload 上传",
|
||||||
|
"description": "文件上传组件"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/form",
|
||||||
|
"name": "表单 (form)",
|
||||||
|
"title": "Form 表单",
|
||||||
|
"description": "一个多功能的并带有字段验证的表单组件"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/autocomplete",
|
||||||
|
"name": "自动完成 (autocomplete)",
|
||||||
|
"title": "Autocomplete 自动完成"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/rate",
|
||||||
|
"name": "评分 (rate)",
|
||||||
|
"title": "Rate 评分组件"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"groupName": "Data",
|
||||||
|
"list": [
|
||||||
|
{
|
||||||
|
"path": "/table",
|
||||||
|
"name": "表格 (table)",
|
||||||
|
"title": "Table 表格",
|
||||||
|
"description": "用于展示多条结构类似的数据, 可对数据进行排序、筛选、对比或其他自定义操作。"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/tag",
|
||||||
|
"name": "标签 (tag)",
|
||||||
|
"title": "Tag 标签",
|
||||||
|
"description": "Tag 标签"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/tooltip",
|
||||||
|
"name": "文字提示 (tooltip)",
|
||||||
|
"title": "Tooltip 文字提示",
|
||||||
|
"description": "优雅地展示文字提示信息"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/popover",
|
||||||
|
"name": "弹出框 (popover)",
|
||||||
|
"title": "Popover 弹出框",
|
||||||
|
"description": "收纳具体内容和相关操作, 激活后弹出展现"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/progress",
|
||||||
|
"name": "进度条 (progress)",
|
||||||
|
"title": "Progress 进度条",
|
||||||
|
"description": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/tree",
|
||||||
|
"name": "tree (tree)",
|
||||||
|
"title": "Tree 树形控件"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/pagination",
|
||||||
|
"name": "分页 (pagination)",
|
||||||
|
"title": "Pagination 分页",
|
||||||
|
"description": "当数据量过多时, 使用分页分解数据"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/badge",
|
||||||
|
"name": "标记 (badge)",
|
||||||
|
"title": " Badge 标记",
|
||||||
|
"description": "出现在按钮、图标旁的数字或状态标记"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"groupName": "Nav",
|
||||||
|
"list": [
|
||||||
|
{
|
||||||
|
"path": "/tabs",
|
||||||
|
"name": "标签页 (tabs)",
|
||||||
|
"title": "Tabs 标签页",
|
||||||
|
"description": "富展现的标签页"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/breadcrumb",
|
||||||
|
"name": "面包屑 (breadcrumb)",
|
||||||
|
"title": "Breadcrumb 面包屑",
|
||||||
|
"description": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/dropdown",
|
||||||
|
"name": "下拉菜单 (dropdown)",
|
||||||
|
"title": "Dropdown 下拉菜单"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/steps",
|
||||||
|
"name": "步骤条 (steps)",
|
||||||
|
"title": "Steps 步骤",
|
||||||
|
"description": "引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤,步骤不得少于 2 步。"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"group": "Form",
|
"name": "安装指南",
|
||||||
"list": [
|
"children": [{
|
||||||
{
|
"path": "/quickstart",
|
||||||
"path": "/autocomplete",
|
"name": "快速上手"
|
||||||
"name": "自动完成 (autocomplete)",
|
}, {
|
||||||
"title": "Autocomplete 自动完成"
|
"path": "/development",
|
||||||
},
|
"name": "开发指南"
|
||||||
{
|
}]
|
||||||
"path": "/select",
|
|
||||||
"name": "选择器 (select)",
|
|
||||||
"title": "Select 选择器",
|
|
||||||
"description": "当选项过多时, 使用下拉菜单展示并选择内容"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "/checkbox",
|
|
||||||
"name": "多选框 (checkbox)",
|
|
||||||
"title": "Checkbox 多选框",
|
|
||||||
"description": "用于在多个可选项中进行多项选择。"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "/radio",
|
|
||||||
"name": "单选框 (radio)",
|
|
||||||
"title": "Radio 单选框",
|
|
||||||
"description": "用于在多个备选项选中单个选项。"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "/input",
|
|
||||||
"name": "输入框 (input)",
|
|
||||||
"title": "Input 输入框"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "/input-number",
|
|
||||||
"name": "计数器 (input-number)",
|
|
||||||
"title": "Input Number 计数器"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "/switch",
|
|
||||||
"name": "开关 (switch)",
|
|
||||||
"title": "Switch 开关",
|
|
||||||
"description": "用于两种对立状态的切换。"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "/time-picker",
|
|
||||||
"name": "时间选择器（time-picker）",
|
|
||||||
"title": "时间选择器",
|
|
||||||
"description": "用于选择或输入时间"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "/date-picker",
|
|
||||||
"name": "日期选择器（date-picker）",
|
|
||||||
"title": "日期选择器",
|
|
||||||
"description": "用于选择或输入时间"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "/datetime-picker",
|
|
||||||
"name": "日期时间选择器",
|
|
||||||
"title": "日期时间选择器",
|
|
||||||
"description": "用于选择或输入日期时间"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "/upload",
|
|
||||||
"name": "上传 (upload)",
|
|
||||||
"title": "upload 上传",
|
|
||||||
"description": "文件上传组件"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "/form",
|
|
||||||
"name": "表单 (form)",
|
|
||||||
"title": "form 表单",
|
|
||||||
"description": "一个多功能的并带有字段验证的表单组件"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "/slider",
|
|
||||||
"name": "滑块 (slider)",
|
|
||||||
"title": "slider 滑块",
|
|
||||||
"description": "通过拖动滑块在一个固定区间内进行选择"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "/rate",
|
|
||||||
"name": "评分 (rate)",
|
|
||||||
"title": "评分组件"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"group": "Nav",
|
|
||||||
"list": [
|
|
||||||
{
|
|
||||||
"path": "/tabs",
|
|
||||||
"name": "标签页 (tabs)",
|
|
||||||
"title": "tabs 标签页",
|
|
||||||
"description": "富展现的标签页"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "/breadcrumb",
|
|
||||||
"name": "面包屑 (breadcrumb)",
|
|
||||||
"title": "breadcrumb 面包屑",
|
|
||||||
"description": ""
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "/dropdown",
|
|
||||||
"name": "下拉菜单 (dropdown)",
|
|
||||||
"title": "Dropdown 下拉菜单"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "/steps",
|
|
||||||
"name": "步骤条 (steps)",
|
|
||||||
"title": "Steps 步骤",
|
|
||||||
"description": "引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤,步骤不得少于 2 步。"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"group": "Data",
|
|
||||||
"list": [
|
|
||||||
{
|
|
||||||
"path": "/table",
|
|
||||||
"name": "表格 (table)",
|
|
||||||
"title": "Table 表格",
|
|
||||||
"description": "用于展示多条结构类似的数据, 可对数据进行排序、筛选、对比或其他自定义操作。"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "/progress",
|
|
||||||
"name": "进度条 (progress)",
|
|
||||||
"title": "progress 进度条",
|
|
||||||
"description": ""
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "/pagination",
|
|
||||||
"name": "分页 (pagination)",
|
|
||||||
"title": "Pagination 分页",
|
|
||||||
"description": "当数据量过多时, 使用分页分解数据"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "/tree",
|
|
||||||
"name": "tree (tree)",
|
|
||||||
"title": "tree"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "/badge",
|
|
||||||
"name": "标记 (badge)",
|
|
||||||
"title": " Badge 标记",
|
|
||||||
"description": "出现在按钮、图标旁的数字或状态标记"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"group": "使用说明",
|
|
||||||
"list": [
|
|
||||||
{
|
|
||||||
"path": "/quickstart",
|
|
||||||
"name": "快速上手"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "/development",
|
|
||||||
"name": "开发指南"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,20 @@
|
||||||
|
<style>
|
||||||
|
.el-col {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<el-col :span="5">
|
<el-row :gutter="25">
|
||||||
<side-nav :data="navsData"></side-nav>
|
<el-col :span="6">
|
||||||
</el-col>
|
<side-nav :data="navsData"></side-nav>
|
||||||
<el-col :span="19">
|
</el-col>
|
||||||
<div class="content">
|
<el-col :span="18">
|
||||||
<router-view></router-view>
|
<div class="content">
|
||||||
</div>
|
<router-view></router-view>
|
||||||
</el-col>
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -15,23 +22,8 @@
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
navsData: [{
|
navsData: navs
|
||||||
name: '组件',
|
|
||||||
children: []
|
|
||||||
}, {
|
|
||||||
name: '安装指南',
|
|
||||||
children: [{
|
|
||||||
path: '/component/quickstart',
|
|
||||||
name: '快速上手'
|
|
||||||
}, {
|
|
||||||
path: '/component/dev',
|
|
||||||
name: '开发指南'
|
|
||||||
}]
|
|
||||||
}]
|
|
||||||
};
|
};
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.navsData[0].children = navs;
|
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -6,21 +6,33 @@ const registerRoute = (config) => {
|
||||||
component: require('./pages/component.vue'),
|
component: require('./pages/component.vue'),
|
||||||
children: []
|
children: []
|
||||||
}];
|
}];
|
||||||
config
|
function addRoute(page) {
|
||||||
.map(nav =>
|
const component = require(`./docs${page.path}.md`);
|
||||||
nav.list.map(page => {
|
|
||||||
const component = require(`./docs${page.path}.md`);
|
|
||||||
|
|
||||||
route[0].children.push({
|
route[0].children.push({
|
||||||
path: page.path.slice(1),
|
path: page.path.slice(1),
|
||||||
meta: {
|
meta: {
|
||||||
title: page.title || page.name,
|
title: page.title || page.name,
|
||||||
description: page.description
|
description: page.description
|
||||||
},
|
},
|
||||||
component: component.default || component
|
component: component.default || component
|
||||||
|
});
|
||||||
|
}
|
||||||
|
config
|
||||||
|
.map(nav => {
|
||||||
|
if (nav.groups) {
|
||||||
|
nav.groups.map(group => {
|
||||||
|
group.list.map(page => {
|
||||||
|
addRoute(page);
|
||||||
|
})
|
||||||
});
|
});
|
||||||
})
|
}
|
||||||
);
|
if (nav.children) {
|
||||||
|
nav.children.map(page => {
|
||||||
|
addRoute(page);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
return { route, navs: config };
|
return { route, navs: config };
|
||||||
};
|
};
|
||||||
|
|
@ -48,12 +60,18 @@ let resourceRoute = {
|
||||||
component: require('./pages/resource.vue')
|
component: require('./pages/resource.vue')
|
||||||
};
|
};
|
||||||
|
|
||||||
|
let indexRoute = {
|
||||||
|
path: '/',
|
||||||
|
name: '首页',
|
||||||
|
component: require('./pages/index.vue')
|
||||||
|
};
|
||||||
|
|
||||||
let changeLogRoute = {
|
let changeLogRoute = {
|
||||||
path: '/changelog',
|
path: '/changelog',
|
||||||
component: require('./pages/changelog.vue')
|
component: require('./pages/changelog.vue')
|
||||||
};
|
};
|
||||||
|
|
||||||
route.route = route.route.concat([guideRoute, resourceRoute, changeLogRoute]);
|
route.route = route.route.concat([indexRoute, guideRoute, resourceRoute, changeLogRoute]);
|
||||||
|
|
||||||
route.route.push({
|
route.route.push({
|
||||||
path: '*',
|
path: '*',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue