details、summary树形做成vue版本后，hover效果无法显示？
目标效果参考：https://segmentfault.com/a/1190000043966941
改成 vue 版本后，鼠标移动到节点上的显示背景效果怎么也不显示了，哪里的问题？
看不懂例子里面 z-index: -1 是怎么显示的，按照正常逻辑，这个伪类绝对定位切zindex等于-1，不应该被挡住了吗？
treeTableItem.vue
<template> <details>
<summary class="tree-item">
<span>{{ item.name }}</span>
</summary>
<template v-if="item.children">
<treeTableItem v-for="(i, idx) in item.children" :item="i" :key="`level_${item.level}_${idx}`"></treeTableItem>
</template>
</details>
</template>
<script>
import treeTableItem from './treeTableItem'
export default {
name: 'treeTableItem',
components: {
treeTableItem,
},
props: {
item: Object
},
data() {
return {
}
},
}
</script>
treeTable.vue
<template> <div class="my-custom-tree" id="tree" ref="treeWrapper">
<treeTableItem v-for="(item, idx) in list" :item="item" :key="`item_${idx}`"></treeTableItem>
</div>
</template>
<script>
import treeTableItem from './treeTableItem'
export default {
name: 'tree-table',
components: {
treeTableItem,
},
mounted() {
this.$refs.treeWrapper.addEventListener('click', function(ev){
if (ev.target.tagName === 'SPAN') {
ev.preventDefault()
}
})
},
props: {
list: {
type: Array,
default: () => {
return []
}
},
},
data () {
return {
}
},
methods: {
},
}
</script>
<style lang="scss" scoped>
.my-custom-tree {
flex: 1;
overflow: auto;
padding: 4px 0;
position: relative;
}
.my-custom-tree{
/deep/summary {
outline: 0;
padding-left: 30px;
list-style: none;
background: repeating-linear-gradient(90deg, #999 0 1px, transparent 0px 2px) 0px 50%/20px 1px no-repeat;
}
}
.my-custom-tree{
/deep/details:last-child {
background-size: 1px 23px;
}
}
.my-custom-tree{
::v-deep >details:not(:last-child)>details:last-child {
background-size: 1px 100%;
}
}
.my-custom-tree {
/deep/details {
padding-left: 40px;
background: repeating-linear-gradient(#999 0 1px, transparent 0px 2px) 40px 0px/1px 100% no-repeat;
/* background: linear-gradient(#999, #999) 40px 0px/1px 100% no-repeat; */
}
}
.my-custom-tree{
>details {
background: none;
padding-left: 0;
}
}
.my-custom-tree{
::v-deep >details{
>summary {
background: none;
}
}
}
.my-custom-tree {
/deep/summary {
display: flex;
align-items: center;
height: 46px;
font-size: 14px;
line-height: 22px;
color: rgba(0, 0, 0, 0.85);
cursor: default;
}
}
.my-custom-tree {
/deep/summary::after {
content: "";
position: absolute;
left: 10px;
right: 10px;
height: 38px;
background: #eef2ff;
background: red;
border-radius: 8px;
z-index: -1;
opacity: 0;
transition: 2s;
}
}
.my-custom-tree {
/deep/summary:hover::after {
opacity: 1;
}
}
.my-custom-tree {
/deep/summary:not(:only-child)::before {
content: "";
width: 14px;
height: 14px;
flex-shrink: 0;
margin-right: 8px;
border: 1px solid #999;
background: linear-gradient(#999, #999) 50%/1px 10px no-repeat,
linear-gradient(#999, #999) 50%/10px 1px no-repeat;
}
}
.my-custom-tree {
/deep/details[open]>summary::before {
background: linear-gradient(#999, #999) 50%/10px 1px no-repeat;
}
}
.my-custom-tree{
/deep/summary span {
line-height: 46px;
}
}
.my-custom-tree {
/deep/summary::before {
position: relative;
z-index: 2;
cursor: pointer
}
}
.my-custom-tree {
/deep/summary span::before {
content: '';
position: absolute;
left: 0;
right: 0;
height: 46px;
}
}
</style>
使用页面代码：
const treeData = [
{
"id": 2,
"name": "项目1",
"parentId": 1,
"fileCount": 14,
"children": [
{
"id": 8,
"name": "文件夹",
"parentId": 2,
"fileCount": 12,
"children": [
{
"id": 137,
"name": "sdd",
"parentId": 8,
"fileCount": 0
}
]
},
{
"id": 221,
"name": "chrome test",
"parentId": 2,
"fileCount": 2
}
]
},
{
"id": 52,
"name": "项目2",
"parentId": 1,
"fileCount": 10,
"children": [
{
"id": 54,
"name": "文件夹2-1",
"parentId": 52,
"fileCount": 10,
"children": [
{
"id": 55,
"name": "文件夹2-1-1",
"parentId": 54,
"fileCount": 0,
"children": [
{
"id": 56,
"name": "文件夹2-1-1-1",
"parentId": 55,
"fileCount": 0,
"children": [
{
"id": 57,
"name": "文件夹2-1-1-1-1",
"parentId": 56,
"fileCount": 0,
"children": [
{
"id": 58,
"name": "文件夹2-1-1-1-1-1",
"parentId": 57,
"fileCount": 0
}
]
}
]
}
]
}
]
}
]
},
{
"id": 53,
"name": "文件夹1",
"parentId": 1,
"fileCount": 12,
"children": [
{
"id": 80,
"name": "文件夹",
"parentId": 53,
"fileCount": 11
},
{
"id": 224,
"name": "文件夹2",
"parentId": 53,
"fileCount": 0
}
]
},
{
"id": 69,
"name": "项目3",
"parentId": 1,
"fileCount": 55,
"children": [
{
"id": 70,
"name": "文件夹1",
"parentId": 69,
"fileCount": 12,
"children": [
{
"id": 4,
"name": "1",
"parentId": 70,
"fileCount": 3,
"children": [
{
"id": 51,
"name": "文件夹2",
"parentId": 4,
"fileCount": 1
}
]
}
]
},
{
"id": 91,
"name": "文件夹",
"parentId": 69,
"fileCount": 10
},
{
"id": 102,
"name": "文件夹",
"parentId": 69,
"fileCount": 10
},
{
"id": 113,
"name": "文件夹",
"parentId": 69,
"fileCount": 10
},
{
"id": 121,
"name": "文件夹的副本",
"parentId": 69,
"fileCount": 10
},
{
"id": 136,
"name": "点点点",
"parentId": 69,
"fileCount": 0
},
{
"id": 140,
"name": "hewei",
"parentId": 69,
"fileCount": 3,
"children": [
{
"id": 142,
"name": "hewei02",
"parentId": 140,
"fileCount": 1
}
]
}
]
}
]
export default {
data(){
return {
treeDatas: treeDatas
}
}
}
<treeTable :list="treeDatas"></treeTable>回答：
我知道了，是背景颜色的影响，把那个z-index:-1去掉，然后那个hover出现::after会覆盖文字，这里用mix-blend-mode来实现文字也可见。注意整个tree加了一个白色背景
https://codepen.io/xboxyan/pen/poqzORW
以上是 details、summary树形做成vue版本后，hover效果无法显示？ 的全部内容， 来源链接： utcz.com/p/934791.html
