vue——element鼠标悬停显示菜单、弹出窗、点击弹出菜单

原创已于 2022-05-21 23:18:20 修改 · 1.2w 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

wy313622821

关注

标签

#elementui #html #前端

分类前端开发

于 2022-05-21 16:32:12 首次发布

vue前端专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在前端开发中实现鼠标悬停显示菜单、弹出窗口以及点击弹出菜单的功能。通过示例代码，展示了Element UI库中el-dropdown和el-dialog组件的用法，包括详细的操作项展示、对话框的自定义配置以及嵌套菜单的实现。这些组件在构建交互式用户界面时非常实用。

1、鼠标悬停显示菜单

效果图如下：

<el-dropdown>
      <span class="el-dropdown-link" ref="echarType">
        操作<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item @click.native="seeTable">详情</el-dropdown-item>
        <el-dropdown-item >删除</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

2、弹出窗

效果图如下：

template里面添加代码：

<el-dialog v-dialogDrag top="25vh" :visible.sync="dialogShow">
      <div slot="title" class="header-title">
        <span class="title-bord"> 我是标题 </span>
      </div>
      <div>
        <span> 我是内容。。。。。 </span>
      </div>
    </el-dialog>

data的reture里面添加代码（控制显示和隐藏）：

dialogShow: true

3、点击弹出菜单

效果如下：

代码如下：

<el-dropdown class="avatar-container">
      <div>
        点击弹出菜单
      </div>
      <el-dropdown-menu slot="dropdown">
        <router-link to="/">
          <el-dropdown-item>
            菜单一
          </el-dropdown-item>
        </router-link>
        <el-dropdown-item>
          <span style="display:block;">菜单二</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>