feat: add box shadow to pwd node

This commit is contained in:
wancat committed 2023-08-28 19:36:38 +08:00
1 parent 54592831ee
commit 6c70a6eaea
2 files changed
+17 -3

No files matched your search

+10 -2
View File
@@ -2,7 +2,7 @@
<a href="#" :class="nodeClass()">{{ node.discovered ? node.name : '???' }}</a>
<ul :class="nodeClass()" v-if="node.children && node.children.length > 0">
<li :class="nodeClass()" v-for="child in node.children" :key="child.path">
<FileNode :node="child" />
<FileNode :node="child" :pwd="pwd" />
</li>
</ul>
</template>
@@ -13,9 +13,17 @@ const props = defineProps({
type: Object,
required: true,
},
pwd: {
type: String,
required: true,
default: '',
},
})
function nodeClass() {
return props.node.discovered ? 'discovered' : ''
const classes = []
if (props.node.discovered) classes.push('discovered')
if (props.node.path === props.pwd) classes.push('pwd')
return classes
}
</script>
+7 -1
View File
@@ -3,6 +3,8 @@ import { onMounted, ref } from 'vue'
import FileNode from './FileNode.vue'
import socket from '../utils/socket.js'
const pwd = ref('/home/rudeus')
const graph = ref({
path: '/',
name: '/',
@@ -66,7 +68,7 @@ onMounted(() => {
<div class="tree w-max h-max">
<ul>
<li>
<FileNode :node="graph" />
<FileNode :node="graph" :pwd="pwd" />
</li>
</ul>
</div>
@@ -175,4 +177,8 @@ ul.discovered,
li.discovered {
border-color: #94a0b4;
}
a.pwd {
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* 水平偏移、垂直偏移、模糊半徑、顏色 */
}
</style>