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> <style scoped>
.layout{ .layout{
border: 1px solid #d7dde4; border: 1px solid #d7dde4;
...@@ -24,83 +68,7 @@ ...@@ -24,83 +68,7 @@
.layout-footer-center{ .layout-footer-center{
text-align: 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 \ No newline at end of file
.ivu-layout-content{
display: flex;flex:1;
}
</style>
\ No newline at end of file \ No newline at end of file
src/components/layout/Footer.vue → src/components/layout/LayoutFooter.vue
<template> <template>
<footer class="footer"> <Footer class="layout-footer-center">2011-2016 &copy; TalkingData</Footer>
footer
</footer>
</template> </template>
<script> <script>
export default { export default {
name: "AppFooter" name: "LayoutFooter"
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
......
src/components/layout/Header.vue → src/components/layout/LayoutHeader.vue
<template> <template>
<transition class="fade"> <Menu mode="horizontal" theme="dark" active-name="1">
<div class="layout-logo"></div>
<article class="Header"> <div class="layout-nav">
<MenuItem name="1">
header <Icon type="ios-navigate"></Icon>
Item 1
</MenuItem>
</article> <MenuItem name="2">
<Icon type="ios-keypad"></Icon>
Item 2
</MenuItem>
<MenuItem name="3">
<Icon type="ios-analytics"></Icon>
</transition> Item 3
</MenuItem>
<MenuItem name="4">
<Icon type="ios-paper"></Icon>
Item 4
</MenuItem>
</div>
</Menu>
</template> </template>
<script> <script>
import {mapState} from "vuex"; import {mapState} from "vuex";
import { Icon, Drawer} from "iview"; //import { Icon, Drawer} from "iview";
export default { export default {
name: "AppHeader", name: "LayoutHeader",
props:{ props:{
headColor:{ headColor:{
type:String, type:String,
...@@ -45,8 +52,8 @@ export default { ...@@ -45,8 +52,8 @@ export default {
}; };
}, },
components: { components: {
Icon, // Icon,
Drawer, // Drawer,
}, },
computed:{ 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 \ No newline at end of file
src/utils/includes.js
...@@ -140,20 +140,20 @@ const components = { ...@@ -140,20 +140,20 @@ const components = {
const iview = { const iview = {
...components, ...components,
iButton: Button, // iButton: Button,
iCircle: Circle, // iCircle: Circle,
iCol: Col, // iCol: Col,
iContent: Content, // iContent: Content,
iForm: Form, // iForm: Form,
iFooter: Footer, // iFooter: Footer,
iHeader: Header, // iHeader: Header,
iInput: Input, // iInput: Input,
iMenu: Menu, // iMenu: Menu,
iOption: Option, // iOption: Option,
iProgress: Progress, // iProgress: Progress,
iSelect: Select, // iSelect: Select,
iSwitch: Switch, // iSwitch: Switch,
iTable: Table, // iTable: Table,
//iTime: Time //iTime: Time
}; };
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!