61 lines
1.1 KiB
Vue
61 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { PropType } from 'vue';
|
|
import DissectionTreeSub from './DissectionTreeSub.vue';
|
|
|
|
defineProps({
|
|
id: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
tree: {
|
|
type: Array as PropType<Record<string, any>[]>,
|
|
required: true,
|
|
},
|
|
sub: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
select: {
|
|
type: Function,
|
|
default: () => {},
|
|
},
|
|
selected: {
|
|
type: Object,
|
|
default: { id: '', idx: 0, start: 0, length: 0 },
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<ul :class="{ tree: true, 'tree-issub': sub }">
|
|
<li v-for="(n, i) in tree" :key="`${id}-${i}`" class="tree-li">
|
|
<DissectionTreeSub
|
|
:id="`${id}-${i}`"
|
|
:node="n"
|
|
:select="select"
|
|
:selected="selected"
|
|
/>
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
|
|
<style lang="css" scoped>
|
|
.tree {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0 solid #e5e7eb;
|
|
box-sizing: border-box;
|
|
}
|
|
.tree-issub {
|
|
padding-left: 0.5rem;
|
|
border-left-width: 1px;
|
|
margin-left: 0.5rem;
|
|
}
|
|
.tree-li {
|
|
display: list-item;
|
|
text-align: -webkit-match-parent;
|
|
line-height: 1;
|
|
}
|
|
</style>
|