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>

Logo

前往低代码交流专区

更多推荐