element ui body添加类名 下拉框修改样式避免全局污染

 

element中要想修改下拉框样式必须去掉scoped，并且下拉框他不属于当前组件的域，所以说如果一个项目有两个甚至更多的地方要用到这个组件，那么难免会出现样式冲突。（一个页面要只有一处用到可忽略）

• 解决冲突的方法，在vue中给个别组件中的body添加类名

具体思路是 -监听当前下拉框，给body添加一个类，下拉框消失再移除这个class，代码如下

1.通过  visible-change 来监听下拉框 弹出就返回true 隐藏就是 false

<el-dropdown @visible-change='addCla' trigger="click" size="medium"> //visible-change监听
        <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
            </el-dropdown-item>
       </el-dropdown-menu>
</el-dropdown>

2. 由于页面不止一处用到了当前组件，所以样式位置等都各不相同，如果不加定时器，在监听到下拉框消失隐藏的时候， 瞬间移除了class会导致 下拉框短时间出现的样式变化 ，也就是还没完全隐藏就收到了污染，所以此处加了一个定时器延时移除

    addCla (bl) {
      var timer = null
      if (bl) {
        document.getElementsByTagName('body')[0].className = 'current-body' //弹出添加class
      } else {
        clearTimeout(timer)
        timer = setTimeout(() => {
          document.body.removeAttribute('class', 'current-body') //隐藏移除class
        }, 300)
      }
    }

3.最后只需要把修改下拉框样式的CSS 写在给body添加的 current-body  类下即可

.current-body { 

      .el-dropdown-menu {


    }
      .el-dropdown-menu__item {


    }
}