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

最新推荐文章于 2024-04-28 14:34:09 发布

Abudula__

最新推荐文章于 2024-04-28 14:34:09 发布

阅读量4.2k

点赞数 1

分类专栏： Javascript

本文链接：https://blog.csdn.net/Abudula__/article/details/99858533

版权

本文介绍了如何在Element-UI中使用单个按钮控制NavMenu的展开和关闭，特别提到了NavMenu的el-radio-button不响应click事件而只响应change事件的问题，为开发者提供了解决方案。

摘要由CSDN通过智能技术生成

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- import CSS -->
    <link
      rel="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-menu
        default-active="1-4-1"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose

最低0.47元/天解锁文章

Abudula__

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
4
评论
element-ui NavMenu 导航菜单通过一个按钮控制

element -ui 里导航菜单是通过两个按钮控制的，但实际开发中很多情况是通过一个按钮来toggle,而且有一个坑就是elemnt ui NavMenu的el-radio-butto 不是click事件，而是只能触发change事件。<!DOCTYPE html><html> <head> <meta charset="UTF-8" /...
复制链接

扫一扫