mirror of https://github.com/ElemeFE/element
update router
Leopoldthecoder
baiyaaaaa
parent
c41f8d5bb7
commit
e86f573ce6
|
|
@ -268,10 +268,6 @@
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<div class="pure-g">
|
<div class="pure-g">
|
||||||
<div class="pure-u-1-6 app__sidebar pure-menu pure-menu-scrollable app__menu">
|
<div class="pure-u-1-6 app__sidebar pure-menu pure-menu-scrollable app__menu">
|
||||||
<router-link class="pure-menu-heading app__brand" to="/">
|
|
||||||
<span class="app__eleme">ELEME</span>NT
|
|
||||||
</router-link>
|
|
||||||
|
|
||||||
<template v-for="(nav, key) in navs">
|
<template v-for="(nav, key) in navs">
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
|
|
@ -292,7 +288,9 @@
|
||||||
v-if="!item.disabled">
|
v-if="!item.disabled">
|
||||||
<router-link
|
<router-link
|
||||||
class="pure-menu-link app__menu__link"
|
class="pure-menu-link app__menu__link"
|
||||||
:to="{ path: item.path, activeClass: 'active' }"
|
active-class="active"
|
||||||
|
:to="'/component' + item.path"
|
||||||
|
exact
|
||||||
v-text="item.name"></router-link>
|
v-text="item.name"></router-link>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -307,27 +305,19 @@
|
||||||
<p class="app__description">{{ $route.meta.description }}</p>
|
<p class="app__description">{{ $route.meta.description }}</p>
|
||||||
<router-view></router-view>
|
<router-view></router-view>
|
||||||
</section>
|
</section>
|
||||||
<toc main=".app__main"></toc>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button class="hljs__button" ref="button"></button>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { navs } from './route.config';
|
import { navs } from './route.config';
|
||||||
import toc from './components/toc';
|
|
||||||
import E from 'oui-dom-events';
|
import E from 'oui-dom-events';
|
||||||
import { toggleClass, addClass, removeClass } from './dom/class';
|
import { toggleClass, addClass, removeClass } from './dom/class';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'app',
|
name: 'app',
|
||||||
|
|
||||||
components: {
|
|
||||||
toc
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
highlights: [],
|
highlights: [],
|
||||||
|
|
|
||||||
|
|
@ -1,55 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="dialog d-popup-center"
|
|
||||||
v-if="rendered"
|
|
||||||
v-show="visible"
|
|
||||||
:transition="transition">
|
|
||||||
<div class="dialog-content">
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import Popup from 'vue-popup';
|
|
||||||
import 'vue-popup/lib/popup.css';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
mixins: [Popup],
|
|
||||||
|
|
||||||
props: {
|
|
||||||
showClose: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
showModal: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
modal: {
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
closeOnClickModal: {
|
|
||||||
default: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
willClose() {
|
|
||||||
this.visible = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="css">
|
|
||||||
.dialog {
|
|
||||||
position: fixed;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 60vw;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.app__main .d-modal {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="table-filter" v-show="visible">haha</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.table-filter {
|
|
||||||
position: absolute 0 100px * *;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script type="text/babel">
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
visible: true
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
events: {
|
|
||||||
toggleFilterPopup(visibleFilter) {
|
|
||||||
this.visible = visibleFilter === 'tag';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
|
||||||
console.log('popup ready');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
<template>
|
|
||||||
<li class="item">
|
|
||||||
<a
|
|
||||||
class="toc__link"
|
|
||||||
:class="{ 'active': active === item.id }"
|
|
||||||
:href="'#' + encodeURIComponent(item.heading)"
|
|
||||||
v-text="item.heading">
|
|
||||||
</a>
|
|
||||||
<ol
|
|
||||||
class="group"
|
|
||||||
v-if="item.children"
|
|
||||||
v-show="active >= item.id && active <= (item.id + item.children.length || 0)">
|
|
||||||
<el-toc-item
|
|
||||||
:item="sub"
|
|
||||||
class="item"
|
|
||||||
:active="active"
|
|
||||||
v-for="sub in item.children">
|
|
||||||
</el-toc-item>
|
|
||||||
</ol>
|
|
||||||
</li>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
/**
|
|
||||||
* 浮动在右边的目录子项
|
|
||||||
*/
|
|
||||||
export default {
|
|
||||||
name: 'el-toc-item',
|
|
||||||
|
|
||||||
props: {
|
|
||||||
item: Object,
|
|
||||||
active: Number
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
encodeURIComponent(source) {
|
|
||||||
return encodeURIComponent(source);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="css">
|
|
||||||
a {
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,203 +0,0 @@
|
||||||
<template>
|
|
||||||
<nav
|
|
||||||
class="toc"
|
|
||||||
:class="{ 'toc--fixed': fixed }"
|
|
||||||
:style="{ 'top': offset + 'px' }">
|
|
||||||
<ol class="group">
|
|
||||||
<el-toc-item
|
|
||||||
v-for="item in toc"
|
|
||||||
class="title"
|
|
||||||
:active="active"
|
|
||||||
:item="item">
|
|
||||||
</el-toc-item>
|
|
||||||
</ol>
|
|
||||||
</nav>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import ElTocItem from './toc-item';
|
|
||||||
import E from 'oui-dom-events';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 浮动在右边的目录
|
|
||||||
*/
|
|
||||||
export default {
|
|
||||||
name: 'toc',
|
|
||||||
|
|
||||||
components: {
|
|
||||||
ElTocItem
|
|
||||||
},
|
|
||||||
|
|
||||||
props: {
|
|
||||||
main: {
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
toc: [],
|
|
||||||
offset: 0,
|
|
||||||
fixed: false,
|
|
||||||
active: 0
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
events: {
|
|
||||||
['element.example.reload']() {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.toc = [];
|
|
||||||
this.anchors = this.findAllAnchors();
|
|
||||||
this.scrollWrap = document.querySelector('body');
|
|
||||||
this.currentHeaderHeight = document.querySelector('.app__main:first-of-type').offsetTop;
|
|
||||||
this.fixedOffsetTop = document.querySelector('.app__menu__label').offsetTop;
|
|
||||||
this.updateFixed();
|
|
||||||
|
|
||||||
this.generateTOC(this.anchors, this.toc);
|
|
||||||
E.off(this.scrollWrap, 'mousewheel.toc.activecurrent');
|
|
||||||
this.scrollActiveCurrent();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
ready() {
|
|
||||||
this.scrollAutoFixed();
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
/**
|
|
||||||
* @see https://github.com/chjj/marked/issues/334
|
|
||||||
*/
|
|
||||||
generateTOC(anchors, toc) {
|
|
||||||
if (document.querySelector('.no-toc')) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
let cache = {};
|
|
||||||
|
|
||||||
for (let key in anchors) {
|
|
||||||
const current = this.fetchAnchorData(anchors[key]);
|
|
||||||
const level = current.level || 1;
|
|
||||||
const last = cache[level - 1];
|
|
||||||
|
|
||||||
current.id = Number(key);
|
|
||||||
|
|
||||||
if (last) {
|
|
||||||
last.children = (last.children || []).concat(current);
|
|
||||||
} else {
|
|
||||||
cache[level] = current;
|
|
||||||
toc.push(current);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
fetchAnchorData(anchor) {
|
|
||||||
const head = anchor.parentNode;
|
|
||||||
const level = head.tagName.match(/\d/g)[0];
|
|
||||||
const heading = head.getAttribute('id');
|
|
||||||
|
|
||||||
return { level, heading };
|
|
||||||
},
|
|
||||||
|
|
||||||
updateFixed() {
|
|
||||||
if (this.scrollWrap.scrollTop <= this.fixedOffsetTop / 2) {
|
|
||||||
this.offset = this.currentHeaderHeight;
|
|
||||||
this.fixed = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.fixed) return;
|
|
||||||
|
|
||||||
this.offset = this.fixedOffsetTop;
|
|
||||||
this.fixed = true;
|
|
||||||
},
|
|
||||||
|
|
||||||
scrollAutoFixed() {
|
|
||||||
E.on(document, 'mousewheel.toc.autofixed', this.updateFixed);
|
|
||||||
},
|
|
||||||
|
|
||||||
findAllAnchors() {
|
|
||||||
return Array.prototype.slice.call(document.querySelectorAll('.anchor'));
|
|
||||||
},
|
|
||||||
|
|
||||||
scrollActiveCurrent() {
|
|
||||||
const anchors = this.findAllAnchors();
|
|
||||||
const body = this.scrollWrap;
|
|
||||||
const distances = [];
|
|
||||||
let current;
|
|
||||||
let index = 0;
|
|
||||||
let max;
|
|
||||||
|
|
||||||
for (let anchor of anchors) {
|
|
||||||
distances.push(anchor.offsetTop);
|
|
||||||
}
|
|
||||||
|
|
||||||
current = distances[index];
|
|
||||||
max = distances.length - 1;
|
|
||||||
this.active = index;
|
|
||||||
|
|
||||||
// 记录当前滚动档位
|
|
||||||
// 判断当前滚动和下个档位
|
|
||||||
E.on(this.scrollWrap, 'mousewheel.toc.activecurrent', e => {
|
|
||||||
const scrollTop = body.scrollTop;
|
|
||||||
|
|
||||||
while (index < max && scrollTop > current) {
|
|
||||||
current = distances[++index];
|
|
||||||
this.active = index;
|
|
||||||
}
|
|
||||||
|
|
||||||
while (index && scrollTop < current) {
|
|
||||||
current = distances[--index];
|
|
||||||
this.active = index;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
beforeDestroy() {
|
|
||||||
E.off(this.scrollWrap, 'mousewheel.toc.autofixed');
|
|
||||||
E.off(this.scrollWrap, 'mousewheel.toc.activecurrent');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="css">
|
|
||||||
.toc {
|
|
||||||
color: #999;
|
|
||||||
margin-right: 40px;
|
|
||||||
margin-top: -14px;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 160px;
|
|
||||||
|
|
||||||
&.toc--fixed {
|
|
||||||
position: fixed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.group {
|
|
||||||
font-size: 13px;
|
|
||||||
list-style-type: none;
|
|
||||||
margin: 0;
|
|
||||||
padding-left: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item {
|
|
||||||
margin: 14px 0;
|
|
||||||
|
|
||||||
.toc__link:hover,
|
|
||||||
.toc__link.active {
|
|
||||||
color: #216fc1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.group {
|
|
||||||
border-left: 1px solid rgba(31, 109, 191, .5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
margin-bottom: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
[
|
|
||||||
{
|
|
||||||
"label": "普通业务",
|
|
||||||
"value": "普通业务",
|
|
||||||
"children": [
|
|
||||||
{
|
|
||||||
"label": "业务1",
|
|
||||||
"value": "业务1",
|
|
||||||
"children": [
|
|
||||||
{
|
|
||||||
"label": "业务5",
|
|
||||||
"value": "业务5",
|
|
||||||
"children": []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "业务2",
|
|
||||||
"value": "业务2",
|
|
||||||
"children": []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "会员业务",
|
|
||||||
"value": "会员业务",
|
|
||||||
"children": []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
[
|
|
||||||
{
|
|
||||||
"label": "选项1",
|
|
||||||
"value": "结果1"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "选项2",
|
|
||||||
"value": "结果2",
|
|
||||||
"disabled": true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "选项3",
|
|
||||||
"value": "结果3"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "选项4",
|
|
||||||
"value": "结果4"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
{
|
|
||||||
"gourp1": [
|
|
||||||
{
|
|
||||||
"label": "选项1",
|
|
||||||
"value": "结果1"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "选项2",
|
|
||||||
"value": "结果2"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "选项3",
|
|
||||||
"value": "结果3"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "选项4",
|
|
||||||
"value": "结果4"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "选项5",
|
|
||||||
"value": "结果5"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "选项6",
|
|
||||||
"value": "结果6"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"gourp2": [
|
|
||||||
{
|
|
||||||
"label": "选项7",
|
|
||||||
"value": "结果7"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "选项8",
|
|
||||||
"value": "结果8"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "选项9",
|
|
||||||
"value": "结果9"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "选项10",
|
|
||||||
"value": "结果10"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "选项11",
|
|
||||||
"value": "结果11"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "选项12",
|
|
||||||
"value": "结果12"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -1,32 +0,0 @@
|
||||||
[
|
|
||||||
{
|
|
||||||
"label": "选项1",
|
|
||||||
"value": "结果1",
|
|
||||||
"remark": "remark1"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "选项2",
|
|
||||||
"value": "结果2",
|
|
||||||
"remark": "remark2"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "选项3",
|
|
||||||
"value": "结果3",
|
|
||||||
"remark": "remark3"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "选项4",
|
|
||||||
"value": "结果4",
|
|
||||||
"remark": "remark4"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "选项5",
|
|
||||||
"value": "结果5",
|
|
||||||
"remark": "remark5"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "选项6",
|
|
||||||
"value": "结果6",
|
|
||||||
"remark": "remark6"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
@ -1,123 +0,0 @@
|
||||||
<section class="guideline no-toc">
|
|
||||||
<h2>选择合适的导航</h2>
|
|
||||||
<p>选择合适的导航可以让用户在产品的使用过程中非常流畅，相反若是不合适就会引起用户操作不适(方向不明确)，以下是「侧栏导航」和「顶部导航」的区别。</p>
|
|
||||||
|
|
||||||
<h3>侧栏导航：</h3>
|
|
||||||
<p>可将导航栏固定在左侧，提高导航可见性，方便页面之间切换；顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等。适用于中后台的管理型、工具型网站。</p>
|
|
||||||
|
|
||||||
<table>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>一级类目</td>
|
|
||||||
<td>
|
|
||||||
<lightbox :visible.sync="showIndexDialog1">
|
|
||||||
<img src="~examples/assets/images/guide1.png" alt="一级类目">
|
|
||||||
</lightbox>
|
|
||||||
<img @click="showIndexDialog1 = true" src="~examples/assets/images/guide1.png" alt="一级类目">
|
|
||||||
<p>适用于结构简单的网站；只有一级页面时，不需要使用面包屑。</p>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>二级类目</td>
|
|
||||||
<td>
|
|
||||||
<lightbox :visible.sync="showIndexDialog2">
|
|
||||||
<img src="~examples/assets/images/guide2.png" alt="二级类目">
|
|
||||||
</lightbox>
|
|
||||||
<img @click="showIndexDialog2 = true" src="~examples/assets/images/guide2.png" alt="二级类目">
|
|
||||||
<p>侧栏中最多可显示两级导航；当使用二级导航时，我们建议搭配使用面包屑，方便用户定位自己的位置和快速返回。</p>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>三级类目</td>
|
|
||||||
<td>
|
|
||||||
<lightbox :visible.sync="showIndexDialog3">
|
|
||||||
<img src="~examples/assets/images/guide3.png" alt="三级类目">
|
|
||||||
</lightbox>
|
|
||||||
<img @click="showIndexDialog3 = true" src="~examples/assets/images/guide3.png" alt="三级类目">
|
|
||||||
<p>适用于较复杂的工具型后台，左侧栏为一级导航，中间栏可显示其对应的二级导航，也可放置其他的工具型选项。</p>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<h3>顶部导航：</h3>
|
|
||||||
<p>顺应了从上至下的正常浏览顺序，方便浏览信息；顶部宽度限制了导航的数量和文本长度。</p>
|
|
||||||
|
|
||||||
<table>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>一级类目</td>
|
|
||||||
<td>
|
|
||||||
<lightbox :visible.sync="showIndexDialog4">
|
|
||||||
<img src="~examples/assets/images/guide4.png" alt="一级类目">
|
|
||||||
</lightbox>
|
|
||||||
<img @click="showIndexDialog4 = true" src="~examples/assets/images/guide4.png" alt="一级类目">
|
|
||||||
<p>适用于导航较少，页面篇幅较长的网站；</p>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import Lightbox from 'examples/components/lightbox';
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
name: 'guideline',
|
|
||||||
|
|
||||||
components: {
|
|
||||||
Lightbox
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
showIndexDialog1: false,
|
|
||||||
showIndexDialog2: false,
|
|
||||||
showIndexDialog3: false,
|
|
||||||
showIndexDialog4: false
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="css">
|
|
||||||
.guideline {
|
|
||||||
img {
|
|
||||||
width: 500px;
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 19px;
|
|
||||||
box-shadow: 1px 2px 3px rgba(0, 0, 0, .2);
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
background-color: #f8f8f8;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
width: 500px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
td {
|
|
||||||
padding: 36px;
|
|
||||||
}
|
|
||||||
|
|
||||||
tr {
|
|
||||||
border-bottom: 1px solid #e4e4e4;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
border-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
td:first-child {
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
width: 21%;
|
|
||||||
min-width: 100px;
|
|
||||||
text-align: center;
|
|
||||||
color: #666;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,31 +1,4 @@
|
||||||
[
|
[
|
||||||
{
|
|
||||||
"group": "使用说明",
|
|
||||||
"list": [
|
|
||||||
{
|
|
||||||
"path": "/quickstart",
|
|
||||||
"name": "快速上手"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "/development",
|
|
||||||
"name": "开发指南"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "/changelog",
|
|
||||||
"name": "更新日志"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"group": "设计指南",
|
|
||||||
"list": [
|
|
||||||
{
|
|
||||||
"path": "/menu",
|
|
||||||
"name": "导航",
|
|
||||||
"description": "导航(Navigation) 可以解决用户在访问页面时：在哪里，去哪里，怎么去的问题。一般导航会有「侧栏导航」和「顶部导航」2种类型。"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"group": "Basic",
|
"group": "Basic",
|
||||||
"list": [
|
"list": [
|
||||||
|
|
@ -247,5 +220,18 @@
|
||||||
"description": "出现在按钮、图标旁的数字或状态标记"
|
"description": "出现在按钮、图标旁的数字或状态标记"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"group": "使用说明",
|
||||||
|
"list": [
|
||||||
|
{
|
||||||
|
"path": "/quickstart",
|
||||||
|
"name": "快速上手"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/development",
|
||||||
|
"name": "开发指南"
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
<template>
|
||||||
|
<div>changelog</div>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
<template>
|
||||||
|
<router-view></router-view>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
<template>
|
||||||
|
<div>design</div>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
<template>
|
||||||
|
<router-view></router-view>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
<template>
|
||||||
|
<div>nav</div>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
<template>
|
||||||
|
<div>resource</div>
|
||||||
|
</template>
|
||||||
|
|
@ -1,15 +1,18 @@
|
||||||
import navConfig from './nav.config.json';
|
import navConfig from './nav.config.json';
|
||||||
|
|
||||||
const registerRoute = (config) => {
|
const registerRoute = (config) => {
|
||||||
let route = [];
|
let route = [{
|
||||||
|
path: '/component',
|
||||||
|
component: require('./pages/component.vue'),
|
||||||
|
children: []
|
||||||
|
}];
|
||||||
config
|
config
|
||||||
.map(nav =>
|
.map(nav =>
|
||||||
nav.list.map(page => {
|
nav.list.map(page => {
|
||||||
if (page.path === '/changelog') return;
|
|
||||||
const component = require(`./docs${page.path}.md`);
|
const component = require(`./docs${page.path}.md`);
|
||||||
|
|
||||||
route.push({
|
route[0].children.push({
|
||||||
path: page.path,
|
path: page.path.slice(1),
|
||||||
meta: {
|
meta: {
|
||||||
title: page.title || page.name,
|
title: page.title || page.name,
|
||||||
description: page.description
|
description: page.description
|
||||||
|
|
@ -24,10 +27,33 @@ const registerRoute = (config) => {
|
||||||
|
|
||||||
const route = registerRoute(navConfig);
|
const route = registerRoute(navConfig);
|
||||||
|
|
||||||
route.route.push({
|
let guideRoute = {
|
||||||
|
path: '/guide',
|
||||||
|
name: '指南',
|
||||||
|
component: require('./pages/guide.vue'),
|
||||||
|
children: [{
|
||||||
|
path: 'design',
|
||||||
|
name: '设计原则',
|
||||||
|
component: require('./pages/design.vue')
|
||||||
|
}, {
|
||||||
|
path: 'nav',
|
||||||
|
name: '导航',
|
||||||
|
component: require('./pages/nav.vue')
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
|
||||||
|
let resourceRoute = {
|
||||||
|
path: '/resource',
|
||||||
|
name: '资源',
|
||||||
|
component: require('./pages/resource.vue')
|
||||||
|
};
|
||||||
|
|
||||||
|
let changeLogRoute = {
|
||||||
path: '/changelog',
|
path: '/changelog',
|
||||||
component: require('../CHANGELOG.md')
|
component: require('./pages/changelog.vue')
|
||||||
});
|
};
|
||||||
|
|
||||||
|
route.route = route.route.concat([guideRoute, resourceRoute, changeLogRoute]);
|
||||||
|
|
||||||
route.route.push({
|
route.route.push({
|
||||||
path: '*',
|
path: '*',
|
||||||
|
|
|
||||||
|
|
@ -43,7 +43,7 @@ import Loading from '../packages/loading/index.js';
|
||||||
import Icon from '../packages/icon/index.js';
|
import Icon from '../packages/icon/index.js';
|
||||||
import Row from '../packages/row/index.js';
|
import Row from '../packages/row/index.js';
|
||||||
import Col from '../packages/col/index.js';
|
import Col from '../packages/col/index.js';
|
||||||
// import Upload from '../packages/upload/index.js';
|
import Upload from '../packages/upload/index.js';
|
||||||
import Progress from '../packages/progress/index.js';
|
import Progress from '../packages/progress/index.js';
|
||||||
import Spinner from '../packages/spinner/index.js';
|
import Spinner from '../packages/spinner/index.js';
|
||||||
import Message from '../packages/message/index.js';
|
import Message from '../packages/message/index.js';
|
||||||
|
|
@ -98,7 +98,7 @@ const install = function(Vue) {
|
||||||
Vue.component(Icon.name, Icon);
|
Vue.component(Icon.name, Icon);
|
||||||
Vue.component(Row.name, Row);
|
Vue.component(Row.name, Row);
|
||||||
Vue.component(Col.name, Col);
|
Vue.component(Col.name, Col);
|
||||||
// Vue.component(Upload.name, Upload);
|
Vue.component(Upload.name, Upload);
|
||||||
Vue.component(Progress.name, Progress);
|
Vue.component(Progress.name, Progress);
|
||||||
Vue.component(Spinner.name, Spinner);
|
Vue.component(Spinner.name, Spinner);
|
||||||
Vue.component(Message.name, Message);
|
Vue.component(Message.name, Message);
|
||||||
|
|
@ -170,7 +170,7 @@ module.exports = {
|
||||||
Icon,
|
Icon,
|
||||||
Row,
|
Row,
|
||||||
Col,
|
Col,
|
||||||
// Upload,
|
Upload,
|
||||||
Progress,
|
Progress,
|
||||||
Spinner,
|
Spinner,
|
||||||
Message,
|
Message,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue