用阻止冒泡来解决变异的ElementUI的需求

变异的意思就是使用ElementUI为基础，通过修改样式或者其他方式来进行达到设计图的效果。

文章推荐

1. 需求一、用Element-Tree来展示下面这样的效果。

个人分析：

1. 选中的效果很简单的 就是选中时候，tree元素有对应的一个类is-current 然后我们修改这个类就好了，然后有一个小箭头就用个伪元素来进行写就好了。

.is-current {
    color: #3480ff;
    position: absolute;
    box-sizing: border-box;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    line-height: 26px;
    background-color: #f5f7fa;
    padding-left: 58px;
    &::before {
      content: "";
      position: absolute;
      right: 16px;
      border: 6px solid transparent;
      border-radius: 2px;
      border-left: 6px solid #3480ff;
      top: 50%;
      transform: translateY(-50%);
    }
  }
复制代码

2. 置灰的效果、需要将树的某个符合条件的元素置灰，这个本身ElementTree没有提供。

   通过slot自定义节点，然后给符合条件节点的加上一个class 完成置灰效果。

   下面的置灰条件匹配时 给元素添加 class not-config-obj

    <template slot-scope="{ data }">
           <div class="custom-node">
             <span
               v-if="data.id !== notConfigObj.id"
               class="right-icon"
               :class="{ 'custom-is-current': targetConfigObj.id === data.id }"
             >
               {{ data.label }}</span
             >
             <span
               v-else
               class="not-config-obj"
               :data-id="data.id"
             >
               {{ data.label }}</span
             >
    </div>
    
   复制代码

    .not-config-obj {
         display: inline-block;
         background-color: #7d7e8317;
         width: 100%;
         position: absolute;
         left: 0;
         top: 0;
         padding-left: 58px;
         box-sizing: border-box;
         line-height: 26px;
         color: #9f9f9fd1;
       }
   复制代码

3. 这个时候问题来了，现在置灰了，但是我们仅仅是用css置灰了，但是点击这个置灰项时候还是会触发上层事件，如下图，本身点击置灰其他已经选中的效果不应该再消失。

   

4. 打开控制台，发现element 对el-tree-node添加了click事件，来进行捕获当前哪一项被选中，我们remove这个事件之后就可以，选中效果没了，所以我们是不是可以直接就点击这个自定义节点时候，停止冒泡就可以了。答案是可以的。代码直接如下。

   

     stopBubblingCoverFather (e) {
         e.stopPropagation()
       }
   复制代码

   

2. 需求二、Element Popover 里面包含Dialog弹窗

问题描述：click触发的popover中嵌套弹窗dialog、点击dialog任何地方popover都会消失。

el-popover是会根据body的点击事件来进行显隐的。如果点击了非弹出层包裹的内容，那么弹出层就会关闭。我们只需要拿到弹窗的最外层然后，让里面的元素阻止往上冒泡即可。

 this.$refs.dialogRef.$el.addEventListener('click', e => {
      e.stopPropagation()
   })
复制代码

测试地址

冒泡动画网站