mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-11-30 19:27:44 +08:00
component side-nav
This commit is contained in:
baiyaaaaa
parent
1b63c03dd7
commit
0d6fdd2bd6
168
examples/app.vue
168
examples/app.vue
@ -270,115 +270,81 @@
|
||||
|
||||
<template>
|
||||
<div id="app">
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1-6 app__sidebar pure-menu pure-menu-scrollable app__menu">
|
||||
<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>
|
||||
<main-header></main-header>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { navs } from './route.config';
|
||||
import E from 'oui-dom-events';
|
||||
import { toggleClass, addClass, removeClass } from './dom/class';
|
||||
// import { navs } from './route.config';
|
||||
// import E from 'oui-dom-events';
|
||||
// import { toggleClass, addClass, removeClass } from './dom/class';
|
||||
import MainHeader from './components/header';
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
|
||||
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;
|
||||
}
|
||||
components: {
|
||||
MainHeader
|
||||
}
|
||||
|
||||
// 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>
|
||||
|
||||
@ -3,12 +3,12 @@
|
||||
height: 80px;
|
||||
background-color: #20a0ff;
|
||||
color: #fff;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
line-height: @height;
|
||||
margin-bottom: 48px;
|
||||
|
||||
.container {
|
||||
height: 100%;
|
||||
|
||||
52
examples/components/side-nav.vue
Normal file
52
examples/components/side-nav.vue
Normal 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>
|
||||
@ -6,10 +6,14 @@ import Element from 'main/index.js';
|
||||
import 'packages/theme-default/src/index.css';
|
||||
import demoBlock from './components/demo-block.vue';
|
||||
|
||||
import SideNav from './components/side-nav';
|
||||
|
||||
Vue.use(Element);
|
||||
Vue.use(VueRouter);
|
||||
Vue.component('demo-block', demoBlock);
|
||||
|
||||
Vue.component('side-nav', SideNav);
|
||||
|
||||
const router = new VueRouter({
|
||||
base: __dirname,
|
||||
routes: configRouter
|
||||
|
||||
@ -1,3 +1,37 @@
|
||||
<template>
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user