github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

component side-nav

pull/2/head
baiyaaaaa 2016-08-23 14:03:45 +08:00
parent 1b63c03dd7
commit 0d6fdd2bd6
5 changed files with 160 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

168
examples/app.vue
View File

@ -270,115 +270,81 @@
<template> <template>
<div id="app"> <div id="app">
<div class="pure-g"> <main-header></main-header>
<div class="pure-u-1-6 app__sidebar pure-menu pure-menu-scrollable app__menu"> <router-view></router-view>
<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 class="pure-u-5-6 app__content">
<header class="app__header">
<h1 class="app__headline">{{ $route.meta.title || 'element 后台组件' }}</h1>
</header>
<section class="app__main" ref="main">
<p class="app__description">{{ $route.meta.description }}</p>
<router-view></router-view>
</section>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import { navs } from './route.config'; // import { navs } from './route.config';
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';
import MainHeader from './components/header';
export default { export default {
name: 'app', name: 'app',
data() { components: {
return { MainHeader
highlights: [],
navState: []
};
},
methods: {
findAllHighlight() {
return Array.prototype.slice.call(document.querySelectorAll('.hljs'));
}
},
created() {
this.navs = navs;
},
mounted() {
this.mainContent = document.querySelector('.app__content');
E.delegate(this.$refs.main, '.hljs__button', 'click.highlight', e => {
const parent = e.target.parentNode;
toggleClass(parent, 'open');
});
},
beforeDestroy() {
E.undelegate(this.$refs.main, '.hljs', 'click.highlight');
},
watch: {
highlights(list) {
list.map(item => {
if (item.offsetHeight <= 100) {
toggleClass(item, 'open');
} else {
item.appendChild(this.$els.button.cloneNode(true));
}
});
}
},
events: {
['element.example.reload']() {
this.$nextTick(() => {
if (this.mainContent.querySelector('.no-toc')) {
addClass(this.mainContent, 'no-toc');
} else {
removeClass(this.mainContent, 'no-toc');
}
this.highlights = this.findAllHighlight();
});
this.mainContent.scrollTop = 0;
return true;
}
} }
// data() {
// return {
// highlights: [],
// navState: []
// };
// },
// methods: {
// findAllHighlight() {
// return Array.prototype.slice.call(document.querySelectorAll('.hljs'));
// }
// },
// created() {
// this.navs = navs;
// },
// mounted() {
// this.mainContent = document.querySelector('.app__content');
// E.delegate(this.$refs.main, '.hljs__button', 'click.highlight', e => {
// const parent = e.target.parentNode;
// toggleClass(parent, 'open');
// });
// },
// beforeDestroy() {
// E.undelegate(this.$refs.main, '.hljs', 'click.highlight');
// },
// watch: {
// highlights(list) {
// list.map(item => {
// if (item.offsetHeight <= 100) {
// toggleClass(item, 'open');
// } else {
// item.appendChild(this.$els.button.cloneNode(true));
// }
// });
// }
// },
// events: {
// ['element.example.reload']() {
// this.$nextTick(() => {
// if (this.mainContent.querySelector('.no-toc')) {
// addClass(this.mainContent, 'no-toc');
// } else {
// removeClass(this.mainContent, 'no-toc');
// }
// this.highlights = this.findAllHighlight();
// });
// this.mainContent.scrollTop = 0;
// return true;
// }
// }
}; };
</script> </script>

2
examples/components/header.vue
View File

@ -3,12 +3,12 @@
height: 80px; height: 80px;
background-color: #20a0ff; background-color: #20a0ff;
color: #fff; color: #fff;
position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
z-index: 1000; z-index: 1000;
line-height: @height; line-height: @height;
margin-bottom: 48px;
.container { .container {
height: 100%; height: 100%;

52
examples/components/side-nav.vue Normal file
View File

@ -0,0 +1,52 @@
<style>
</style>
<template>
<div class="side-nav">
<ul>
<li v-for="item in data">
<a href="">{{item.name}}</a>
</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'
}">
<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>
</template>
<script>
export default {
props: {
data: Array
},
data() {
return {
highlights: [],
navState: []
};
}
};
</script>

4
examples/entry.js
View File

@ -6,10 +6,14 @@ import Element from 'main/index.js';
import 'packages/theme-default/src/index.css'; import 'packages/theme-default/src/index.css';
import demoBlock from './components/demo-block.vue'; import demoBlock from './components/demo-block.vue';
import SideNav from './components/side-nav';
Vue.use(Element); Vue.use(Element);
Vue.use(VueRouter); Vue.use(VueRouter);
Vue.component('demo-block', demoBlock); Vue.component('demo-block', demoBlock);
Vue.component('side-nav', SideNav);
const router = new VueRouter({ const router = new VueRouter({
base: __dirname, base: __dirname,
routes: configRouter routes: configRouter

36
examples/pages/component.vue
View File

@ -1,3 +1,37 @@
<template> <template>
<router-view></router-view> <div class="container">
<el-col :span="5">
<side-nav :data="navsData"></side-nav>
</el-col>
<el-col :span="19">
<div class="content">
<router-view></router-view>
</div>
</el-col>
</div>
</template> </template>
<script>
import { navs } from '../route.config';
export default {
data() {
return {
navsData: [{
name: '组件',
children: []
}, {
name: '安装指南',
children: [{
path: '/component/quickstart',
name: '快速上手'
}, {
path: '/component/dev',
name: '开发指南'
}]
}]
};
},
created() {
this.navsData[0].children = navs;
}
}
</script>