700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > element-ui NavMenu 导航菜单 通过一个按钮控制

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

时间:2022-05-10 15:37:04

相关推荐

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="/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="/vue/dist/vue.js"></script><!-- import JavaScript --><script src="/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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。