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

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>