Skip to content

马贞晓 / templateVUE

Go to a project
Commit a7ed1ab5 by 马贞晓
Options

简单框架

1 parent b9d26ef2
Inline Side-by-side
Showing 5 changed files with 125 additions and 116 deletions
src/components/layout/Layout.vue
<template>
<article class="layout h100">
<Layout class="h100">
<Header>
<!-- 头部 -->
<LayoutHeader />
</Header>
<Layout :style="{padding: '0 50px'}">
<!-- <Breadcrumb :style="{margin: '16px 0'}">
<BreadcrumbItem>Home</BreadcrumbItem>
<BreadcrumbItem>Components</BreadcrumbItem>
<BreadcrumbItem>Layout</BreadcrumbItem>
</Breadcrumb> -->
<Content :style="{padding: '24px 0', minHeight: '280px', background: '#fff'}">
<Layout>
<!-- 侧边 -->
<Sider hide-trigger class="h100" :style="{background: '#fff'}">
<SlideBar />
</Sider>
<!-- 中心 -->
<Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
<router-view></router-view>
</Content>
</Layout>
</Content>
</Layout>
<Footer class="layout-footer-center">
<!-- 底部，如果需要 -->
<LayoutFooter />
</Footer>
</Layout>
</article>
</template>
<script>
import SlideBar from "./SlideBar";
import LayoutHeader from "./LayoutHeader";
import LayoutFooter from "./LayoutFooter";
export default {
name:"MyLayout",
components:{SlideBar,LayoutHeader,LayoutFooter}
}
</script>
<style scoped>
.layout{
border: 1px solid #d7dde4;
......@@ -24,83 +68,7 @@
.layout-footer-center{
text-align: center;
}
</style>
<template>
<article class="layout h100">
<Layout class="h100">
<Header>
<Menu mode="horizontal" theme="dark" active-name="1">
<div class="layout-logo"></div>
<div class="layout-nav">
<MenuItem name="1">
<Icon type="ios-navigate"></Icon>
Item 1
</MenuItem>
<MenuItem name="2">
<Icon type="ios-keypad"></Icon>
Item 2
</MenuItem>
<MenuItem name="3">
<Icon type="ios-analytics"></Icon>
Item 3
</MenuItem>
<MenuItem name="4">
<Icon type="ios-paper"></Icon>
Item 4
</MenuItem>
</div>
</Menu>
</Header>
<Layout :style="{padding: '0 50px'}">
<Breadcrumb :style="{margin: '16px 0'}">
<BreadcrumbItem>Home</BreadcrumbItem>
<BreadcrumbItem>Components</BreadcrumbItem>
<BreadcrumbItem>Layout</BreadcrumbItem>
</Breadcrumb>
<Content :style="{padding: '24px 0', minHeight: '280px', background: '#fff'}">
<Layout>
<Sider hide-trigger :style="{background: '#fff'}">
<Menu active-name="1-2" theme="light" width="auto" :open-names="['1']">
<Submenu name="1">
<template slot="title">
<Icon type="ios-navigate"></Icon>
Item 1
</template>
<MenuItem name="1-1">Option 1</MenuItem>
<MenuItem name="1-2">Option 2</MenuItem>
<MenuItem name="1-3">Option 3</MenuItem>
</Submenu>
<Submenu name="2">
<template slot="title">
<Icon type="ios-keypad"></Icon>
Item 2
</template>
<MenuItem name="2-1">Option 1</MenuItem>
<MenuItem name="2-2">Option 2</MenuItem>
</Submenu>
<Submenu name="3">
<template slot="title">
<Icon type="ios-analytics"></Icon>
Item 3
</template>
<MenuItem name="3-1">Option 1</MenuItem>
<MenuItem name="3-2">Option 2</MenuItem>
</Submenu>
</Menu>
</Sider>
<Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
Content
</Content>
</Layout>
</Content>
</Layout>
<Footer class="layout-footer-center">2011-2016 &copy; TalkingData</Footer>
</Layout>
</article>
</div>
</template>
<script>
export default {
}
</script>
\ No newline at end of file
.ivu-layout-content{
display: flex;flex:1;
}
</style>
\ No newline at end of file
src/components/layout/Footer.vue → src/components/layout/LayoutFooter.vue
<template>
<footer class="footer">
footer
</footer>
<Footer class="layout-footer-center">2011-2016 &copy; TalkingData</Footer>
</template>
<script>
export default {
name: "AppFooter"
name: "LayoutFooter"
};
</script>
<style lang="less" scoped>
......
src/components/layout/Header.vue → src/components/layout/LayoutHeader.vue
<template>
<transition class="fade">
<article class="Header">
header
</article>
</transition>
<Menu mode="horizontal" theme="dark" active-name="1">
<div class="layout-logo"></div>
<div class="layout-nav">
<MenuItem name="1">
<Icon type="ios-navigate"></Icon>
Item 1
</MenuItem>
<MenuItem name="2">
<Icon type="ios-keypad"></Icon>
Item 2
</MenuItem>
<MenuItem name="3">
<Icon type="ios-analytics"></Icon>
Item 3
</MenuItem>
<MenuItem name="4">
<Icon type="ios-paper"></Icon>
Item 4
</MenuItem>
</div>
</Menu>
</template>
<script>
import {mapState} from "vuex";
import { Icon, Drawer} from "iview";
//import { Icon, Drawer} from "iview";
export default {
name: "AppHeader",
name: "LayoutHeader",
props:{
headColor:{
type:String,
......@@ -45,8 +52,8 @@ export default {
};
},
components: {
Icon,
Drawer,
// Icon,
// Drawer,
},
computed:{
......
src/components/layout/SlideBar.vue 0 → 100644
<template>
<Menu active-name="1-2" class="h100" theme="light" width="auto" :open-names="['1']">
<Submenu name="1">
<template slot="title">
<Icon type="ios-navigate"></Icon>
Item 1
</template>
<MenuItem name="1-1">Option 1</MenuItem>
<MenuItem name="1-2">Option 2</MenuItem>
<MenuItem name="1-3">Option 3</MenuItem>
</Submenu>
<Submenu name="2">
<template slot="title">
<Icon type="ios-keypad"></Icon>
Item 2
</template>
<MenuItem name="2-1">Option 1</MenuItem>
<MenuItem name="2-2">Option 2</MenuItem>
</Submenu>
<Submenu name="3">
<template slot="title">
<Icon type="ios-analytics"></Icon>
Item 3
</template>
<MenuItem name="3-1">Option 1</MenuItem>
<MenuItem name="3-2">Option 2</MenuItem>
</Submenu>
</Menu>
</template>
<script>
export default {
name:"SlideBar"
}
</script>
\ No newline at end of file
src/utils/includes.js
......@@ -140,20 +140,20 @@ const components = {
const iview = {
...components,
iButton: Button,
iCircle: Circle,
iCol: Col,
iContent: Content,
iForm: Form,
iFooter: Footer,
iHeader: Header,
iInput: Input,
iMenu: Menu,
iOption: Option,
iProgress: Progress,
iSelect: Select,
iSwitch: Switch,
iTable: Table,
// iButton: Button,
// iCircle: Circle,
// iCol: Col,
// iContent: Content,
// iForm: Form,
// iFooter: Footer,
// iHeader: Header,
// iInput: Input,
// iMenu: Menu,
// iOption: Option,
// iProgress: Progress,
// iSelect: Select,
// iSwitch: Switch,
// iTable: Table,
//iTime: Time
};
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!