变异的意思就是使用ElementUI为基础,通过修改样式或者其他方式来进行达到设计图的效果。
1. 需求一、用Element-Tree来展示下面这样的效果。
个人分析:
- 选中的效果很简单的 就是选中时候,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%);
}
}
复制代码
-
置灰的效果、需要将树的某个符合条件的元素置灰,这个本身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; } 复制代码
-
这个时候问题来了,现在置灰了,但是我们仅仅是用css置灰了,但是点击这个置灰项时候还是会触发上层事件,如下图,本身点击置灰其他已经选中的效果不应该再消失。
-
打开控制台,发现element 对el-tree-node添加了click事件,来进行捕获当前哪一项被选中,我们remove这个事件之后就可以,选中效果没了,所以我们是不是可以直接就点击这个自定义节点时候,停止冒泡就可以了。答案是可以的。代码直接如下。
扫描二维码关注公众号,回复: 13673132 查看本文章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()
})
复制代码