搭建安装vue
引入element库
在main.js中引入element库:
/* 引入element */ import ElementUI from 'element-ui'
构思demo原型
在写之前,得想想要写什么,最后写完需要达到一个怎样的效果。我们本次demo主要是实践菜单规划,主要包括三个部分:顶部菜单、侧栏菜单、body内容。点击侧面导航栏会显示对于body内容。效果如下:
菜单组件‘el-submenu’应用
开始开发菜单组件前,可以参考下官网文档打用法介绍点这里
顶部菜单代码:
<template>
<div id="top">
<el-menu
:default-active="activeIndex2"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
style="height: 5rem"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作台1</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项1</el-menu-item>
<el-menu-item index="2-4-2">选项2</el-menu-item>
<el-menu-item index="2-4-3">选项3</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title">我的工作台2</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
<el-menu-item index="3-3">选项3</el-menu-item>
</el-submenu>
<el-submenu index="4">
<template slot="title">我的工作台3</template>
<el-menu-item index="4-1">选项1</el-menu-item>
<el-menu-item index="4-2">选项2</el-menu-item>
<el-menu-item index="4-3">选项3</el-menu-item>
</el-submenu>
</el-menu>
</div>
</template>
<script>
export default {
data() {
return {
activeIndex: '1',
activeIndex2: '1'
};
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>
<style>
/* #top{
width: auto;
height: 30px;
background: gray;
} */
</style>
侧栏菜单代码:
<template>
<div id='HeaderMenu'>
<!-- <el-row class='tac'> -->
<el-col :span='2' >
<el-menu
background-color='#545c64'
text-color='#303133'
active-text-color="#ffd04b"
default-active="1">
<el-menu-item index="1" style="font-size: large;" v-on:click="notifyParentCom('comm1')">
<i class='el-icon-menu'></i>
<span slot="title" > 导航一</span>
</el-menu-item>
<el-menu-item index="2" style="font-size: large;" v-on:click="notifyParentCom('comm2')">
<i class='el-icon-menu'></i>
<span slot="title"> 导航二</span>
</el-menu-item>
<el-menu-item index="3" style="font-size: large;" v-on:click="notifyParentCom('comm3')">
<i class='el-icon-menu'></i>
<span slot="title"> 导航三</span>
</el-menu-item>
<el-menu-item index="4" style="font-size: large;" v-on:click="notifyParentCom('comm4')">
<i class='el-icon-menu'></i>
<span slot="title"> 导航四</span>
</el-menu-item>
<el-menu-item index="5" style="font-size: large;" v-on:click="notifyParentCom('comm5')">
<i class='el-icon-menu'></i>
<span slot="title"> 导航五</span>
</el-menu-item>
<el-menu-item index="6" style="font-size: large;" v-on:click="notifyParentCom('comm6')">
<i class='el-icon-menu'></i>
<span slot="title"> 导航六</span>
</el-menu-item>
<el-menu-item index="7" style="font-size: large;" v-on:click="notifyParentCom('comm7')">
<i class='el-icon-menu'></i>
<span slot="title"> 导航七</span>
</el-menu-item>
<el-menu-item index="8" style="font-size: large;" v-on:click="notifyParentCom('comm8')">
<i class='el-icon-menu'></i>
<span slot="title"> 导航八</span>
</el-menu-item>
<el-menu-item index="9" style="font-size: large;" v-on:click="notifyParentCom('comm9')">
<i class='el-icon-menu'></i>
<span slot="title"> 导航九</span>
</el-menu-item>
<el-menu-item index="10" style="font-size: large;" v-on:click="notifyParentCom('comm10')">
<i class='el-icon-menu'></i>
<span slot="title"> 导航十</span>
</el-menu-item>
</el-menu>
</el-col>
<!-- </el-row> -->
</div>
</template>
<script>
export default {
data(){
return{
}
},
methods:{
notifyParentCom(target){
console.log(target);
switch(target){
case 'comm1':
this.$emit('childMenuSwitch','comm1')
break;
case 'comm2':
this.$emit('childMenuSwitch','comm2')
break;
case 'comm3':
this.$emit('childMenuSwitch','comm3')
break;
case 'comm4':
this.$emit('childMenuSwitch','comm4')
break;
case 'comm5':
this.$emit('childMenuSwitch','comm5')
break;
case 'comm6':
this.$emit('childMenuSwitch','comm6')
break;
case 'comm7':
this.$emit('childMenuSwitch','comm7')
break;
case 'comm8':
this.$emit('childMenuSwitch','comm8')
break;
case 'comm9':
this.$emit('childMenuSwitch','comm9')
break;
case 'comm10':
this.$emit('childMenuSwitch','comm10')
break;
}
}
}
}
</script>
<style>
</style>
body内容样例:
<template>
<div id="comm">
<el-col :span="21" style="margin-top: 1rem">
<el-row :gutter="30" class="row-bg" type="flex" align="top" style="margin: 1.5% 1.5% 1.5% 1.5%">
<el-col :span="6">
<demo2 ></demo2>
</el-col>
</el-row>
</el-col>
</div>
</template>
<script>
import demo2 from './demo2.vue'
export default {
components:{
demo2,
},
}
</script>
总结知识点
1、组件嵌套使用
先引用注册才能使用:
2、子组件向父组件传值:自定义事件,this.
e
m
i
t
,
发
送
信
息
,
在
父
组
件
中
用
v
−
o
n
监
听
子
组
件
的
事
件
!
[
在
这
里
插
入
图
片
描
述
]
(
h
t
t
p
s
:
/
/
i
m
g
−
b
l
o
g
.
c
s
d
n
i
m
g
.
c
n
/
20190725151740771.
p
n
g
)
在
子
组
件
中
用
emit,发送信息,在父组件中用v-on监听子组件的事件 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190725151740771.png) 在子组件中用
emit,发送信息,在父组件中用v−on监听子组件的事件![在这里插入图片描述](https://img−blog.csdnimg.cn/20190725151740771.png)在子组件中用emit监听组件变化传递给父组件,其中第一个参数是监听事件名字,第二个参数是返回给父组件的结果