element-ui NavMenu 导航菜单通过一个按钮控制

element -ui 里导航菜单是通过两个按钮控制的，但实际开发中很多情况是通过一个按钮来toggle,而且有一个坑就是elemnt ui NavMenu的el-radio-butto 不是click事件，而是只能触发change事件。

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><!-- import CSS --><linkrel="stylesheet"href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/><style>.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;min-height: 400px;}span.el-radio-button__inner{padding:5px 15px;}el-menu{display: none;}el-radio-group{display: none;}</style></head><body><div id="app"><el-menudefault-active="1-4-1"class="el-menu-vertical-demo"@open="handleOpen"@close="handleClose":collapse="isCollapse"><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span slot="title">导航一</span></template><el-menu-item-group><span slot="title">分组一</span><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><span slot="title">选项4</span><el-menu-item index="1-4-1">选项1</el-menu-item></el-submenu></el-submenu><el-menu-item index="2"><i class="el-icon-menu"></i><span slot="title">导航二</span></el-menu-item><el-menu-item index="3" disabled><i class="el-icon-document"></i><span slot="title">导航三</span></el-menu-item><el-menu-item index="4"><i class="el-icon-setting"></i><span slot="title">导航四</span></el-menu-item></el-menu><el-radio-group v-model="isCollapse" @change="toggleName"><el-radio-button v-if="display"   :label="false" >{{open}}</el-radio-button><el-radio-button v-else    :label="true" >{{close}}</el-radio-button></el-radio-group></div></body><!-- import Vue before Element --><script src="https://unpkg.com/vue/dist/vue.js"></script><!-- import JavaScript --><script src="https://unpkg.com/element-ui/lib/index.js"></script><script>new Vue({el: "#app",data: function() {return {visible: false,isCollapse: true,display: true,open: "展开",close: "收缩",};},methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);},toggleName: function() {if (this.display === true) {this.display = false;} else {this.display = true;}}}});</script>
</html>

element-ui NavMenu 导航菜单通过一个按钮控制相关推荐

element UI NavMenu 导航菜单样式修改
.el-menu { background-color: rgba(165, 42, 42, 0); } .el-menu.el-menu--horizontal { border: none; } ...
修改element ui的导航菜单样式，包括下拉菜单
第一次使用element ui,根据项目需求,选择了NavMenu导航菜单, Element - The world's most popular Vue UI framework 首先将代码复制粘贴 ...
Element UI样式修改之NavMenu导航菜单
目录 Element UI样式修改之NavMenu导航菜单一.成果展示二.步骤三.完整代码 Element UI样式修改之NavMenu导航菜单一.成果展示 Element UI官网给出的例子 ...
element菜单组件样式修改NavMenu导航菜单
NavMenu导航菜单 1.选中菜单的颜色 .el-menu-item.is-active {background-color: #41a3fb !important; } 2.菜单hover颜色 . ...
ElementUi中NavMenu 导航菜单router用法
问题引出写页面中遇到需要写NavMenu 导航菜单,作为菜鸟按照Element官方的NavMenu 导航菜单用法,传统式使用在data声明一个activeIndex作为跳转的首页,当我点击NavMe ...
Elementui NavMenu 导航菜单使用
官方文档https://element.eleme.cn/#/zh-CN/component/menu NavMenu 导航菜单官方使用项目实例官方使用 <el-menu :default ...
vue+elementUI项目中使用NavMenu导航菜单
vue+elementUI项目中使用NavMenu 导航菜单在elementUI官网组件中NavMenu 导航菜单的使用只是简单地运用,在实践项目中还需要配合路由配置.一般后台管理系统不只是导航菜单 ...
element ui 中 el-checkbox-group 点击一个全部选中的问题
element ui 中 el-checkbox-group 点击一个全部选中的问题原因是:checkbox-group中的v-modle要单独一个数组对象,不能作为表单对象,ruleForm中的一 ...
【Vue+Element UI】关闭指定某一个页面的loading动画
[Vue+Element UI]关闭指定某一个页面的loading动画模板:vue-admin-template v4.4.0 问题描述:由于vue-admin默认配置了全局loading,所以页面 ...

element-ui NavMenu 导航菜单通过一个按钮控制

element-ui NavMenu 导航菜单通过一个按钮控制相关推荐

最新文章

热门文章

element-ui NavMenu 导航菜单 通过一个按钮控制

element-ui NavMenu 导航菜单 通过一个按钮控制相关推荐

最新文章

热门文章

element-ui NavMenu 导航菜单通过一个按钮控制

element-ui NavMenu 导航菜单通过一个按钮控制相关推荐