Skip to content

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

component nav

parent 0d6fdd2b
Hide whitespace changes
Inline Side-by-side
Showing with 362 additions and 300 deletions
examples/components/side-nav.vue
View file @ 42479329
<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>
......
examples/nav.config.json
View file @ 42479329
[ [
{ {
"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": "开发指南"
}
]
} }
] ]
examples/pages/component.vue
View file @ 42479329
<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 @@ ...@@ -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>
examples/route.config.js
View file @ 42479329
...@@ -6,21 +6,33 @@ const registerRoute = (config) => { ...@@ -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 = { ...@@ -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: '*',
......
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