Vue后台管理系统练习-2首页顶栏搭建

今日效果如下:
(因为没有找图所以用了文件内自带的logo图片)首先设置左侧按钮，同样利用element-ui的icon库，配合button组件，将size设置为mini获取更好的视觉感受
左侧内容代码如下:

<div class="l-content">
	<el-button
		@click="unflod"
		plain
		icon="el-icon-menu"
		size="mini"
	></el-button>
	<h4 style="color: #fff; margin-left: 20px">首页</h4>
</div>

此按钮的作用为控制侧栏展开收起
因为我先做了这部分才看的教程,所以没有使用vuex
vuex的方法写在后面

父子组件传值:
因此在组件内设置点击事件，点击时向父组件（即home）传递相反的isCollaspe值

<el-button @click="unflod" plain icon="el-icon-menu" size="mini"></el-button>

<script>
export default {
     
	name:"CommonHeader",
	methods: {
     
		unflod