mirror of https://github.com/ElemeFE/element
component nav
baiyaaaaa
parent
0d6fdd2bd6
commit
4247932988
|
|
@ -1,40 +1,86 @@
|
|||
<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>
|
||||
<template>
|
||||
<div class="side-nav">
|
||||
<ul>
|
||||
<li v-for="item in data">
|
||||
<a href="">{{item.name}}</a>
|
||||
|
||||
<li class="nav-item" v-for="item in data">
|
||||
<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-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'
|
||||
}">
|
||||
<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="pure-menu-item app__menu__item"
|
||||
v-for="item in nav.list"
|
||||
class="nav-item"
|
||||
v-for="item in group.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>
|
||||
v-text="item.title"></router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
[
|
||||
{
|
||||
"group": "Basic",
|
||||
"name": "基础组件",
|
||||
"groups": [{
|
||||
"groupName": "Basic",
|
||||
"list": [
|
||||
{
|
||||
"path": "/button",
|
||||
"path": "/layout",
|
||||
"name": "按钮 (button)",
|
||||
"title": "Button 按钮",
|
||||
"description": "常用的操作按钮"
|
||||
"title": "Layout 布局",
|
||||
"description": ""
|
||||
},
|
||||
{
|
||||
"path": "/icon",
|
||||
|
|
@ -14,10 +16,10 @@
|
|||
"title": "Icon 图标"
|
||||
},
|
||||
{
|
||||
"path": "/tag",
|
||||
"name": "标签 (tag)",
|
||||
"title": "Tag 标签",
|
||||
"description": "Tag 标签"
|
||||
"path": "/button",
|
||||
"name": "按钮 (button)",
|
||||
"title": "Button 按钮",
|
||||
"description": "常用的操作按钮"
|
||||
},
|
||||
{
|
||||
"path": "/dialog",
|
||||
|
|
@ -30,18 +32,6 @@
|
|||
"name": "弹框 (message-box)",
|
||||
"title": "message-box 弹框"
|
||||
},
|
||||
{
|
||||
"path": "/popover",
|
||||
"name": "弹出框 (popover)",
|
||||
"title": "popover 弹出框",
|
||||
"description": "收纳具体内容和相关操作, 激活后弹出展现"
|
||||
},
|
||||
{
|
||||
"path": "/tooltip",
|
||||
"name": "文字提示 (tooltip)",
|
||||
"title": "tooltip 文字提示",
|
||||
"description": "优雅地展示文字提示信息"
|
||||
},
|
||||
{
|
||||
"path": "/alert",
|
||||
"name": "警告 (alert)",
|
||||
|
|
@ -75,18 +65,13 @@
|
|||
]
|
||||
},
|
||||
{
|
||||
"group": "Form",
|
||||
"groupName": "Form",
|
||||
"list": [
|
||||
{
|
||||
"path": "/autocomplete",
|
||||
"name": "自动完成 (autocomplete)",
|
||||
"title": "Autocomplete 自动完成"
|
||||
},
|
||||
{
|
||||
"path": "/select",
|
||||
"name": "选择器 (select)",
|
||||
"title": "Select 选择器",
|
||||
"description": "当选项过多时, 使用下拉菜单展示并选择内容"
|
||||
"path": "/radio",
|
||||
"name": "单选框 (radio)",
|
||||
"title": "Radio 单选框",
|
||||
"description": "用于在多个备选项选中单个选项。"
|
||||
},
|
||||
{
|
||||
"path": "/checkbox",
|
||||
|
|
@ -94,12 +79,6 @@
|
|||
"title": "Checkbox 多选框",
|
||||
"description": "用于在多个可选项中进行多项选择。"
|
||||
},
|
||||
{
|
||||
"path": "/radio",
|
||||
"name": "单选框 (radio)",
|
||||
"title": "Radio 单选框",
|
||||
"description": "用于在多个备选项选中单个选项。"
|
||||
},
|
||||
{
|
||||
"path": "/input",
|
||||
"name": "输入框 (input)",
|
||||
|
|
@ -110,68 +89,131 @@
|
|||
"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": "时间选择器",
|
||||
"title": "TimePicker 时间选择器",
|
||||
"description": "用于选择或输入时间"
|
||||
},
|
||||
{
|
||||
"path": "/date-picker",
|
||||
"name": "日期选择器（date-picker）",
|
||||
"title": "日期选择器",
|
||||
"title": "DatePicker",
|
||||
"description": "用于选择或输入时间"
|
||||
},
|
||||
{
|
||||
"path": "/datetime-picker",
|
||||
"name": "日期时间选择器",
|
||||
"title": "日期时间选择器",
|
||||
"title": "DatetimePicker",
|
||||
"description": "用于选择或输入日期时间"
|
||||
},
|
||||
{
|
||||
"path": "/upload",
|
||||
"name": "上传 (upload)",
|
||||
"title": "upload 上传",
|
||||
"title": "Upload 上传",
|
||||
"description": "文件上传组件"
|
||||
},
|
||||
{
|
||||
"path": "/form",
|
||||
"name": "表单 (form)",
|
||||
"title": "form 表单",
|
||||
"title": "Form 表单",
|
||||
"description": "一个多功能的并带有字段验证的表单组件"
|
||||
},
|
||||
{
|
||||
"path": "/slider",
|
||||
"name": "滑块 (slider)",
|
||||
"title": "slider 滑块",
|
||||
"description": "通过拖动滑块在一个固定区间内进行选择"
|
||||
"path": "/autocomplete",
|
||||
"name": "自动完成 (autocomplete)",
|
||||
"title": "Autocomplete 自动完成"
|
||||
},
|
||||
{
|
||||
"path": "/rate",
|
||||
"name": "评分 (rate)",
|
||||
"title": "评分组件"
|
||||
"title": "Rate 评分组件"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"group": "Nav",
|
||||
"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 标签页",
|
||||
"title": "Tabs 标签页",
|
||||
"description": "富展现的标签页"
|
||||
},
|
||||
{
|
||||
"path": "/breadcrumb",
|
||||
"name": "面包屑 (breadcrumb)",
|
||||
"title": "breadcrumb 面包屑",
|
||||
"title": "Breadcrumb 面包屑",
|
||||
"description": ""
|
||||
},
|
||||
{
|
||||
|
|
@ -186,52 +228,16 @@
|
|||
"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": [
|
||||
{
|
||||
"name": "安装指南",
|
||||
"children": [{
|
||||
"path": "/quickstart",
|
||||
"name": "快速上手"
|
||||
},
|
||||
{
|
||||
}, {
|
||||
"path": "/development",
|
||||
"name": "开发指南"
|
||||
}
|
||||
]
|
||||
}]
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,13 +1,20 @@
|
|||
<style>
|
||||
.el-col {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="container">
|
||||
<el-col :span="5">
|
||||
<el-row :gutter="25">
|
||||
<el-col :span="6">
|
||||
<side-nav :data="navsData"></side-nav>
|
||||
</el-col>
|
||||
<el-col :span="19">
|
||||
<el-col :span="18">
|
||||
<div class="content">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -15,23 +22,8 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
navsData: [{
|
||||
name: '组件',
|
||||
children: []
|
||||
}, {
|
||||
name: '安装指南',
|
||||
children: [{
|
||||
path: '/component/quickstart',
|
||||
name: '快速上手'
|
||||
}, {
|
||||
path: '/component/dev',
|
||||
name: '开发指南'
|
||||
}]
|
||||
}]
|
||||
navsData: navs
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.navsData[0].children = navs;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -6,9 +6,7 @@ const registerRoute = (config) => {
|
|||
component: require('./pages/component.vue'),
|
||||
children: []
|
||||
}];
|
||||
config
|
||||
.map(nav =>
|
||||
nav.list.map(page => {
|
||||
function addRoute(page) {
|
||||
const component = require(`./docs${page.path}.md`);
|
||||
|
||||
route[0].children.push({
|
||||
|
|
@ -19,8 +17,22 @@ const registerRoute = (config) => {
|
|||
},
|
||||
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 };
|
||||
};
|
||||
|
|
@ -48,12 +60,18 @@ let resourceRoute = {
|
|||
component: require('./pages/resource.vue')
|
||||
};
|
||||
|
||||
let indexRoute = {
|
||||
path: '/',
|
||||
name: '首页',
|
||||
component: require('./pages/index.vue')
|
||||
};
|
||||
|
||||
let changeLogRoute = {
|
||||
path: '/changelog',
|
||||
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({
|
||||
path: '*',
|
||||
|
|
|
|||
Loading…
Reference in New Issue