vue项目修改element-ui的el-dropdown的显示隐藏

项目需求

通过点击小铃铛，显示dropdown的el-dropdown的el-dropdown-menu，也就是白色背景的框
再次点击消息接收管理实现另一个菜单的出现和隐藏，同时把el-dropdown-menu隐藏

其实这个好实现，直接把消息通知和消息接收管理写入一个el-dropdown-item标签中就行,点击就隐藏

这一项是element默认为true的

<el-dropdown-menu slot="dropdown" class="project-dropdown" :style="{warnlistheight}" >
    <!-- 单独显示报警列表标题 -->
    <!-- <el-dropdown-item style="padding:0"
     id="dropdowntitle" >
      <div style="height:50px;">
        <span 
          style="font-size:16px;
          color:#666666;
          font-weight: 500;
          line-height:50px;
          padding:0 20px"
          >消息通知</span>
        <span 
          style="float: right;
          color:#1472C8;
          line-height:50px;
          padding:0 20px;
          cursor:pointer"
          @click="warningswitch()"
          >消息接收管理</span>
      </div>
    </el-dropdown-item>
</el-dropdown-menu>

但是鄙人不想这样实现，因为他会有一个默认的hover样式还有烦人的padding和margin问题修改，如果要改hover样式，鄙人也有办法,参照css的源码改一下

1. 来看一下hover样式原本效果

2. 修改一下

 /* css style */
.el-dropdown-menu__item:focus,.el-dropdown-menu__item:not(.is-disabled):hover{background-color:red;color:#66b1ff}

3. 修改后hover的样式效果

4. 至于烦人的padding和margin问题，直接

.el-dropdown-menu{
  padding:0;
  margin:0;
}
/* just so so */

5. 另一种方式自己写一个div然后嵌套，要实现点击隐藏直接在标签行内加入一个ref=‘xxx’，然后@click方法中加入

 /* css */
<el-dropdown-menu slot="dropdown" class="project-dropdown" :style="{warnlistheight}" ref="messageDrop">

            <!-- 单独显示报警列表标题 -->
            <div style="height:50px;">
                <span 
                  style="font-size:16px;color:#666666;font-weight: 500;line-height:50px;padding:0 20px"
                  >消息通知</span>
                <span 
                  style="float: right;color:#1472C8;line-height:50px;padding:0 20px;cursor:pointer"
                  @click="warningswitch()"
                  >消息接收管理</span>
              </div>

/* // style  */

 warningswitch(){
      this.$refs.eldrop.visible = false
      console.log(this.$refs.eldrop.visible = false,'this.$refs.eldrop.dropdown');
    },

可自行打印一下this.$ref.eldrop看一下

最后贴一下element的css的源码

.el-dropdown .el-button-group{display:block}.el-dropdown .el-button-group .el-button{float:none}.el-dropdown .el-dropdown__caret-button{padding-left:5px;padding-right:5px;position:relative;border-left:none}.el-dropdown .el-dropdown__caret-button::before{content:'';position:absolute;display:block;width:1px;top:5px;bottom:5px;left:0;background:rgba(255,255,255,.5)}.el-dropdown .el-dropdown__caret-button.el-button--default::before{background:rgba(220,223,230,.5)}.el-dropdown .el-dropdown__caret-button:hover::before{top:0;bottom:0}.el-dropdown .el-dropdown__caret-button .el-dropdown__icon{padding-left:0}.el-dropdown__icon{font-size:12px;margin:0 3px}.el-dropdown .el-dropdown-selfdefine:focus:active,.el-dropdown .el-dropdown-selfdefine:focus:not(.focusing){outline-width:0}.el-dropdown-menu{position:absolute;top:0;left:0;z-index:10;padding:10px 0;margin:5px 0;background-color:#FFF;border:1px solid #EBEEF5;border-radius:4px;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.el-dropdown-menu__item{list-style:none;line-height:36px;padding:0 20px;margin:0;font-size:14px;color:#606266;cursor:pointer;outline:0}.el-dropdown-menu__item:focus,.el-dropdown-menu__item:not(.is-disabled):hover{background-color:#ecf5ff;color:#66b1ff}.el-dropdown-menu__item i{margin-right:5px}.el-dropdown-menu__item--divided{position:relative;margin-top:6px;border-top:1px solid #EBEEF5}.el-dropdown-menu__item--divided:before{content:'';height:6px;display:block;margin:0 -20px;background-color:#FFF}.el-dropdown-menu__item.is-disabled{cursor:default;color:#bbb;pointer-events:none}.el-dropdown-menu--medium{padding:6px 0}.el-dropdown-menu--medium .el-dropdown-menu__item{line-height:30px;padding:0 17px;font-size:14px}.el-dropdown-menu--medium .el-dropdown-menu__item.el-dropdown-menu__item--divided{margin-top:6px}.el-dropdown-menu--medium .el-dropdown-menu__item.el-dropdown-menu__item--divided:before{height:6px;margin:0 -17px}.el-dropdown-menu--small{padding:6px 0}.el-dropdown-menu--small .el-dropdown-menu__item{line-height:27px;padding:0 15px;font-size:13px}.el-dropdown-menu--small .el-dropdown-menu__item.el-dropdown-menu__item--divided{margin-top:4px}.el-dropdown-menu--small .el-dropdown-menu__item.el-dropdown-menu__item--divided:before{height:4px;margin:0 -15px}.el-dropdown-menu--mini{padding:3px 0}.el-dropdown-menu--mini .el-dropdown-menu__item{line-height:24px;padding:0 10px;font-size:12px}.el-dropdown-menu--mini .el-dropdown-menu__item.el-dropdown-menu__item--divided{margin-top:3px}.el-dropdown-menu--mini .el-dropdown-menu__item.el-dropdown-menu__item--divided:before{height:3px;margin:0 -10px}