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>

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45 5 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐