共计 1810 个字符,预计需要花费 5 分钟才能阅读完成。
应用细节
目前企业开发我的项目,比拟罕用的 UI 框架大抵有三个,elementUI、IView、AntD。当然还有别的 UI 框架,不过有的可能要免费。其实每个框架在应用的过程中,都会有对应的“坑”,其实所谓的“坑”就是官网文档写的不够具体,导致用户在应用的过程中的细节和官网文档定义的细节不统一。然而官网文档在保护的过程中,又不能用大白话来写,那样就太 low 了,所以官网文档中的局部组件的应用介绍文案会比拟高大上,导致新应用此 UI 框架的用户会漏了什么货色。
“踩坑”其实就是总结经验的过程,为了不便大家更好的了解我写的这个案例,就把外围的代码贴出来。话不多少,先看最终成果
最终效果图
讲解:导航栏有三个
1 什么是外卖(只有一个一级导航)
2 吃外卖的益处、2.1 省本人烧饭工夫、2.2 省了刷锅工夫、2.3 省了跑腿工夫(既有一级导航又有对应二级导航)
3 吃外卖的害处、3.1 少了烧饭的乐趣、3.2 外卖太贵了(也是既有一级导航又有对应二级导航)
步骤一(复制官网代码进行批改)
代码图示
<template>
<div class="homeBox">
<div class="left">
<div class="leftNav">
<el-menu
:default-active="activeIndex"
class="elMenu"
background-color="#333"
text-color="#B0B0B2"
active-text-color="#fff"
@open="handleOpen"
@close="handleClose"
:unique-opened="true"
router
>
<el-menu-item index="eatOut">
<i class="el-icon-eleme"></i>
<span slot="title"> 什么是外卖 </span>
</el-menu-item>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-eleme"></i>
<span> 吃外卖的益处 </span>
</template>
<el-menu-item index="saveTime"> 省本人烧饭工夫 </el-menu-item>
<el-menu-item index="saveWash"> 省了刷锅工夫 </el-menu-item>
<el-menu-item index="saveRun"> 省了跑腿工夫 </el-menu-item>
</el-submenu>
<el-submenu index="3">
<template slot="title">
<i class="el-icon-eleme"></i>
<span> 吃外卖的害处 </span>
</template>
<el-menu-item index="noFun"> 少了烧饭的乐趣 </el-menu-item>
<el-menu-item index="expensive"> 外卖太贵了 </el-menu-item>
</el-submenu>
</el-menu>
</div>
</div>
<div class="right">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
// 这里应用以后路由的 name 名字会更加好一点,就不会写死了,刷新还在的
activeIndex: this.$route.name,
};
},
components: {},
mounted() {},
methods: {handleOpen(key, keyPath) {// console.log("open",key, keyPath);
},
handleClose(key, keyPath) {// console.log("close",key, keyPath);
},
},
};
</script>
别忘了要定义路由
问题一 el-submenu 不加 index 的报错图
起因是 index 的属性值是定义组件时必须传入的。同时组件的 @select 也须要用到这个 index
问题二 点击只有一级菜单时不主动合上其余曾经开展的菜单
效果图如下
想要解决这个问题,就要用到组件提供的另外一个事件,@select 事件,代码图如下
附带打印 select 回调函数接管的参数
正文完
发表至: segmentfault
2021-02-01