Skip to content

E
Element
Commit 79d92a87 authored by Leopoldthecoder's avatar Leopoldthecoder
Browse files
Options

update router

parent da8a014b
Show whitespace changes
Inline Side-by-side
Showing with 70 additions and 643 deletions
examples/app.vue
View file @ 79d92a87
......@@ -268,10 +268,6 @@
<div id="app">
<div class="pure-g">
<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">
<a
href="#"
......@@ -292,7 +288,9 @@
v-if="!item.disabled">
<router-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>
</li>
</ul>
......@@ -307,27 +305,19 @@
<p class="app__description">{{ $route.meta.description }}</p>
<router-view></router-view>
</section>
<toc main=".app__main"></toc>
</div>
</div>
<button class="hljs__button" ref="button"></button>
</div>
</template>
<script>
import { navs } from './route.config';
import toc from './components/toc';
import E from 'oui-dom-events';
import { toggleClass, addClass, removeClass } from './dom/class';
export default {
name: 'app',
components: {
toc
},
data() {
return {
highlights: [],
......
examples/components/lightbox.vue deleted 100644 → 0
View file @ da8a014b
<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>
\ No newline at end of file
examples/components/table-filter.vue deleted 100644 → 0
View file @ da8a014b
<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>
\ No newline at end of file
examples/components/toc-item.vue deleted 100644 → 0
View file @ da8a014b
<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>
examples/components/toc.vue deleted 100644 → 0
View file @ da8a014b
<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>
examples/data/cascader.json deleted 100644 → 0
View file @ da8a014b
[
{
"label": "普通业务",
"value": "普通业务",
"children": [
{
"label": "业务1",
"value": "业务1",
"children": [
{
"label": "业务5",
"value": "业务5",
"children": []
}
]
},
{
"label": "业务2",
"value": "业务2",
"children": []
}
]
},
{
"label": "会员业务",
"value": "会员业务",
"children": []
}
]
examples/data/select-disabled.json deleted 100644 → 0
View file @ da8a014b
[
{
"label": "选项1",
"value": "结果1"
},
{
"label": "选项2",
"value": "结果2",
"disabled": true
},
{
"label": "选项3",
"value": "结果3"
},
{
"label": "选项4",
"value": "结果4"
}
]
examples/data/select-group.json deleted 100644 → 0
View file @ da8a014b
{
"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"
}
]
}
\ No newline at end of file
examples/data/select-normal.json deleted 100644 → 0
View file @ da8a014b
[
{
"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"
}
]
examples/docs/guideline.md deleted 100644 → 0
View file @ da8a014b
<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>
\ No newline at end of file
examples/nav.config.json
View file @ 79d92a87
[
{
"group": "使用说明",
"list": [
{
"path": "/quickstart",
"name": "快速上手"
},
{
"path": "/development",
"name": "开发指南"
},
{
"path": "/changelog",
"name": "更新日志"
}
]
},
{
"group": "设计指南",
"list": [
{
"path": "/menu",
"name": "导航",
"description": "导航(Navigation) 可以解决用户在访问页面时：在哪里，去哪里，怎么去的问题。一般导航会有「侧栏导航」和「顶部导航」2种类型。"
}
]
},
{
"group": "Basic",
"list": [
......@@ -247,5 +220,18 @@
"description": "出现在按钮、图标旁的数字或状态标记"
}
]
},
{
"group": "使用说明",
"list": [
{
"path": "/quickstart",
"name": "快速上手"
},
{
"path": "/development",
"name": "开发指南"
}
]
}
]
examples/pages/changelog.vue 0 → 100644
View file @ 79d92a87
<template>
<div>changelog</div>
</template>
\ No newline at end of file
examples/pages/component.vue 0 → 100644
View file @ 79d92a87
<template>
<router-view></router-view>
</template>
\ No newline at end of file
examples/pages/design.vue 0 → 100644
View file @ 79d92a87
<template>
<div>design</div>
</template>
\ No newline at end of file
examples/pages/guide.vue 0 → 100644
View file @ 79d92a87
<template>
<router-view></router-view>
</template>
\ No newline at end of file
examples/pages/nav.vue 0 → 100644
View file @ 79d92a87
<template>
<div>nav</div>
</template>
\ No newline at end of file
examples/pages/resource.vue 0 → 100644
View file @ 79d92a87
<template>
<div>resource</div>
</template>
\ No newline at end of file
examples/route.config.js
View file @ 79d92a87
import navConfig from './nav.config.json';
const registerRoute = (config) => {
let route = [];
let route = [{
path: '/component',
component: require('./pages/component.vue'),
children: []
}];
config
.map(nav =>
nav.list.map(page => {
if (page.path === '/changelog') return;
const component = require(`./docs${page.path}.md`);
route.push({
path: page.path,
route[0].children.push({
path: page.path.slice(1),
meta: {
title: page.title || page.name,
description: page.description
......@@ -24,10 +27,33 @@ const registerRoute = (config) => {
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',
component: require('../CHANGELOG.md')
});
component: require('./pages/changelog.vue')
};
route.route = route.route.concat([guideRoute, resourceRoute, changeLogRoute]);
route.route.push({
path: '*',
......
src/index.js
View file @ 79d92a87
......@@ -43,7 +43,7 @@ import Loading from '../packages/loading/index.js';
import Icon from '../packages/icon/index.js';
import Row from '../packages/row/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 Spinner from '../packages/spinner/index.js';
import Message from '../packages/message/index.js';
......@@ -98,7 +98,7 @@ const install = function(Vue) {
Vue.component(Icon.name, Icon);
Vue.component(Row.name, Row);
Vue.component(Col.name, Col);
// Vue.component(Upload.name, Upload);
Vue.component(Upload.name, Upload);
Vue.component(Progress.name, Progress);
Vue.component(Spinner.name, Spinner);
Vue.component(Message.name, Message);
......@@ -170,7 +170,7 @@ module.exports = {
Icon,
Row,
Col,
// Upload,
Upload,
Progress,
Spinner,
Message,
......
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