Skip to content

E
Element
Commit 42479329 authored by baiyaaaaa's avatar baiyaaaaa
Browse files
Options

component nav

parent 0d6fdd2b
Show whitespace changes
Inline Side-by-side
Showing with 362 additions and 300 deletions
examples/components/side-nav.vue
View file @ 42479329
<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>
......
examples/nav.config.json
View file @ 42479329
[
{
"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,109 +89,110 @@
"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": "/tabs",
"name": "标签页 (tabs)",
"title": "tabs 标签页",
"description": "富展现的标签页"
},
{
"path": "/breadcrumb",
"name": "面包屑 (breadcrumb)",
"title": "breadcrumb 面包屑",
"description": ""
"path": "/table",
"name": "表格 (table)",
"title": "Table 表格",
"description": "用于展示多条结构类似的数据, 可对数据进行排序、筛选、对比或其他自定义操作。"
},
{
"path": "/dropdown",
"name": "下拉菜单 (dropdown)",
"title": "Dropdown 下拉菜单"
"path": "/tag",
"name": "标签 (tag)",
"title": "Tag 标签",
"description": "Tag 标签"
},
{
"path": "/steps",
"name": "步骤条 (steps)",
"title": "Steps 步骤",
"description": "引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤,步骤不得少于 2 步。"
}
]
"path": "/tooltip",
"name": "文字提示 (tooltip)",
"title": "Tooltip 文字提示",
"description": "优雅地展示文字提示信息"
},
{
"group": "Data",
"list": [
{
"path": "/table",
"name": "表格 (table)",
"title": "Table 表格",
"description": "用于展示多条结构类似的数据, 可对数据进行排序、筛选、对比或其他自定义操作。"
"path": "/popover",
"name": "弹出框 (popover)",
"title": "Popover 弹出框",
"description": "收纳具体内容和相关操作, 激活后弹出展现"
},
{
"path": "/progress",
"name": "进度条 (progress)",
"title": "progress 进度条",
"title": "Progress 进度条",
"description": ""
},
{
"path": "/tree",
"name": "tree (tree)",
"title": "Tree 树形控件"
},
{
"path": "/pagination",
"name": "分页 (pagination)",
"title": "Pagination 分页",
"description": "当数据量过多时, 使用分页分解数据"
},
{
"path": "/tree",
"name": "tree (tree)",
"title": "tree"
},
{
"path": "/badge",
"name": "标记 (badge)",
......@@ -222,16 +202,42 @@
]
},
{
"group": "使用说明",
"groupName": "Nav",
"list": [
{
"path": "/quickstart",
"name": "快速上手"
"path": "/tabs",
"name": "标签页 (tabs)",
"title": "Tabs 标签页",
"description": "富展现的标签页"
},
{
"path": "/development",
"name": "开发指南"
"path": "/breadcrumb",
"name": "面包屑 (breadcrumb)",
"title": "Breadcrumb 面包屑",
"description": ""
},
{
"path": "/dropdown",
"name": "下拉菜单 (dropdown)",
"title": "Dropdown 下拉菜单"
},
{
"path": "/steps",
"name": "步骤条 (steps)",
"title": "Steps 步骤",
"description": "引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤,步骤不得少于 2 步。"
}
]
}]
},
{
"name": "安装指南",
"children": [{
"path": "/quickstart",
"name": "快速上手"
}, {
"path": "/development",
"name": "开发指南"
}]
}
]
examples/pages/component.vue
View file @ 42479329
<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>
examples/route.config.js
View file @ 42479329
......@@ -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: '*',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment