61b878c20f
- 在 src/components 目录下创建了 CustomTreeItem.vue 文件 - 在 TestView.vue 中引入并使用了 CustomTreeItem 组件 - 调整了 TestView.vue 中的模态框和树形结构的显示逻辑
47 lines
927 B
Vue
47 lines
927 B
Vue
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
|
|
const props = defineProps({
|
|
module: Object
|
|
})
|
|
|
|
const isFolder = computed(() => {
|
|
return props.module.children && props.module.children.length > 0
|
|
})
|
|
|
|
function toggle() {
|
|
isOpen.value = !isOpen.value
|
|
}
|
|
|
|
function changeType() {
|
|
if (!isFolder.value) {
|
|
isOpen.value = true
|
|
}
|
|
}
|
|
|
|
const emit = defineEmits(['add-child'])
|
|
|
|
function addChild() {
|
|
emit('add-child', props.module)
|
|
}
|
|
|
|
const isOpen = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<li>
|
|
<div class="tree-item" @click="toggle" @dblclick="changeType">
|
|
{{ module.name }}<span v-if="isFolder">[{{ isOpen ? '-' : '+' }}]</span>
|
|
<CustomTreeItem
|
|
v-for="child in module.children"
|
|
:key="child.id"
|
|
:module="child"
|
|
@add-child="$emit('add-child', $event)"
|
|
></CustomTreeItem>
|
|
<li class="add" @click="addChild">+</li>
|
|
</div>
|
|
</li>
|
|
</template>
|
|
|
|
<style scoped></style>
|