dropdown下拉菜单的封装使用

<template>
  <div>
    <el-dropdown trigger="click" @command="MoreInfoCommand" placement="bottom">
      <el-tooltip class="item" effect="dark" content="设置" placement="bottom">
        <div class="iconBox"><i class="el-icon-s-operation"></i></div>
      </el-tooltip>

      <el-dropdown-menu slot="dropdown">
        <!-- <el-dropdown-item icon="el-icon-edit" command="editinfo" style="color: #ff7575;"> 编辑信息 </el-dropdown-item> -->
        <el-dropdown-item icon="el-icon-edit" command="editinfo"> 项目信息 </el-dropdown-item>
        <el-dropdown-item icon="el-icon-user" command="user"> 成员管理 </el-dropdown-item>

        <el-dropdown-item icon="el-icon-star-off" command="SaveTemplate" divided> 另存模版 </el-dropdown-item>

        <el-dropdown-item command="SaveTemplate">
          <el-dropdown placement="right-start" trigger="hover" @command="moreHandleCommand">
            <div class="personalization">
              <div>
                <i class="el-icon-document-add"></i>
                <span>导入任务</span>
              </div>
              <i class="el-icon-caret-right"></i>
            </div>

            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-reading" command="labelDoc"> 测试 </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-dropdown-item>

        <el-dropdown-item icon="el-icon-s-operation" command="SaveTemplate" divided> 更多设置 </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<style lang="scss" scoped>
.iconBox {
  padding: 5px 8px;
  border-radius: 4px;
  cursor: pointer;
  &:hover {
    color: #6698ff;
    background: rgba(102, 152, 255, 0.1);
  }
  &:focus {
    visibility: visible;
    color: #6698ff;
    background: rgba(102, 152, 255, 0.1);
  }
}

::v-deep.el-dropdown-menu {
  width: 200px;
}

::v-deep.el-dropdown-menu__item {
  line-height: 38px;
  padding: 0px 15px;
  font-size: 16px;
  margin: 6px 0;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.personalization {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 38px;
  font-size: 16px;

  &:hover {
    color: #47a1fb;
    background: #e8f3ff;
  }
}
</style>

如图: