Skip to content

V
vue-gis

OpenDocCN / vue-gis

通知 3
Star 0
Fork 0
V
vue-gis

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 3458d7da 编写于 作者: T tgd
浏览文件
操作

siderbar🐱‍👓🐱‍👓🐱‍👓🐱‍👓🐱‍👓🐱‍👓🐱‍👓🐱‍👓🐱‍👓🐱‍👓🐱‍👓🐱‍👓🐱‍👓🐱‍👓❤❤❤

上级 6108f633
隐藏空白更改
内联 并排
Showing with 137 addition and 126 deletion
src/App.vue
浏览文件 @ 3458d7da
<template>
<div id="app" class="app">
<!-- <div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/> -->
<div class="siderbar">
<Siderbar/>
</div>
<div class="container">
<div class="header">header</div>
<div class="content">content</div>
<router-view/>
</div>
</div>
</template>
......@@ -21,7 +15,6 @@ export default {
components: {
Siderbar
}
}
</script>
......@@ -36,22 +29,17 @@ html, body {
display: flex;
width: 100%;
height: 100%;
background: #F5F7F9;
.siderbar {
width: 240px;
background: #545c64;
background: #001B31;
overflow: hidden;
overflow-y: auto;
}
.container {
flex: 1;
display: flex;
flex-direction: column;
.header {
flex: none;
height: 50px;
line-height: 50px;
}
.content {
flex: 1;
}
overflow: hidden;
overflow-y: auto;
}
}
</style>
</style>
\ No newline at end of file
src/components/HelloWorld.vue 已删除 100644 → 0
浏览文件 @ 6108f633
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
src/components/layout/Siderbar.vue
浏览文件 @ 3458d7da
<template>
<div class="siderbar">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
</div>
</template>
<script>
import routes from '@/router/routes'
export default {
name: 'Siderbar',
data() {
return {
methods: {
renderItem() {
return (
routes.map(item => {
// 由于只有2层，所以简单写了
const children = item.children
if (children && children.length > 0) {
return (
<el-submenu index={ item.path }>
<template slot="title">
<i class={ item.icon }></i>
<span>{ item.text }</span>
</template>
<el-menu-item-group>
{
children.map(list => {
return (
<el-menu-item route={list} index={ list.path }>{ list.text }</el-menu-item>
)
})
}
</el-menu-item-group>
</el-submenu>
)
} else {
return (
<el-menu-item index={ item.path }>
<i class={ item.icon }></i>
<span slot="title">{ item.text }</span>
</el-menu-item>
)
}
})
)
}
},
render(h) {
return (
<div class="siderbar">
<div class="header">vue-gis案例demo</div>
<el-menu
default-active={ this.$route.path }
background-color="#001B31"
text-color="#fff"
active-text-color="#ffd04b"
router={ true }>
{ this.renderItem() }
</el-menu>
</div>
)
}
}
</script>
\ No newline at end of file
</script>
<style lang="scss" scoped>
.siderbar {
.header {
height: 50px;
line-height: 50px;
text-align: center;
font-size: 18px;
color: #FFFFFF;
}
.el-menu {
border: none;
}
}
</style>
\ No newline at end of file
src/router/index.js
浏览文件 @ 3458d7da
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import routes from './routes'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: () => import('../views/About.vue')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
......
src/router/routes.js 0 → 100644
浏览文件 @ 3458d7da
const routes = [
{
path: '/',
name: 'home',
text: '首页',
icon: 'el-icon-s-home',
component: () => import('@/views/home')
},
{
path: '',
redirect: '/test/test1',
name: 'test',
text: '测试',
icon: 'el-icon-s-help',
children: [
{
path: '/test/test1',
name: 'test1',
text: '测试1',
component: () => import('@/views/test/test1')
},
{
path: '/test/test2',
name: 'test2',
text: '测试2',
component: () => import('@/views/test/test2')
},
{
path: '/test/hh',
name: 'hh',
text: 'hh',
component: () => import('@/views/test/hh')
}
]
}
]
export default routes
\ No newline at end of file
src/views/Home.vue → src/views/home/index.vue
浏览文件 @ 3458d7da
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
home
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'home',
components: {
HelloWorld
}
}
</script>
src/views/test/hh/index.vue 0 → 100644
浏览文件 @ 3458d7da
<template>
<div>
hhhhhhhhhh
</div>
</template>
\ No newline at end of file
src/views/About.vue → src/views/test/test1/index.vue
浏览文件 @ 3458d7da
<template>
<div class="about">
<h1>This is an about page</h1>
1
</div>
</template>
src/views/test/test2/index.vue 0 → 100644
浏览文件 @ 3458d7da
<template>
<div class="about">
2
</div>
</template>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或