drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add layout component with header, content, sider and footer

Browse source
This commit is contained in:
zhigang.li 2017-12-18 18:25:16 +08:00
parent e6508e277f
commit a2eb028782
17 changed files with 509 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

61
examples/routers/layout.vue Normal file
View file

@ -0,0 +1,61 @@
<template>
<div class="layout-demo-con">
<Layout :style="{minHeight: '100vh'}">
<Sider
v-model="isCollapsed"
collapsed-width="0"
breakpoint="md"
ref="side"
width="200">
<Menu width="auto" theme="dark" active-name="1">
<MenuGroup title="内容管理">
<MenuItem name="1">
<Icon type="document-text"></Icon>
文章管理
</MenuItem>
<MenuItem name="2">
<Icon type="chatbubbles"></Icon>
评论管理
</MenuItem>
</MenuGroup>
<MenuGroup title="统计分析">
<MenuItem name="3">
<Icon type="heart"></Icon>
用户留存
</MenuItem>
<MenuItem name="4">
<Icon type="heart-broken"></Icon>
流失用户
</MenuItem>
</MenuGroup>
</Menu>
</Sider>
<Layout class-name="test-class">
<Header :style="{background: '#eee'}"><Button @click="toggleCollapse">菜单</Button></Header>
<Content :style="{background:'#FFCF9E'}">
<p v-for="i in 100" :key="i">{{ i }}</p>
</Content>
<Footer>sdfsdsdfsdfs</Footer>
</Layout>
</Layout>
</div>
</template>
<script>
export default {
data () {
return {
isCollapsed: false
};
},
methods: {
toggleCollapse () {
this.$refs.side.toggleCollapse();
}
}
};
</script>
<style lang="less" scoped>
.layout-demo-con{
height: 100%;
}
</style>