71 lines
1.2 KiB
Vue
71 lines
1.2 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { ref, onMounted, onUnmounted, reactive, toRefs, watch } from "vue";
|
||
|
|
import view1Item from './view1Item.vue'
|
||
|
|
import view2 from './view2/index.vue'
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
treeState:{
|
||
|
|
default:false,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
//const emit = defineEmits([
|
||
|
|
//])
|
||
|
|
let data = reactive({
|
||
|
|
})
|
||
|
|
|
||
|
|
const treeStateTime = ref(true)
|
||
|
|
|
||
|
|
watch(()=>props.treeState,(newVal,oldVal)=>{
|
||
|
|
treeStateTime.value = false
|
||
|
|
setTimeout(()=>{
|
||
|
|
treeStateTime.value = true
|
||
|
|
},250)
|
||
|
|
})
|
||
|
|
|
||
|
|
const view1List = ref([
|
||
|
|
{
|
||
|
|
name:'P1',
|
||
|
|
},{
|
||
|
|
name:'V1',
|
||
|
|
},{
|
||
|
|
name:'V1-1',
|
||
|
|
}
|
||
|
|
])
|
||
|
|
onMounted(()=>{
|
||
|
|
})
|
||
|
|
onUnmounted(()=>{
|
||
|
|
})
|
||
|
|
defineExpose({})
|
||
|
|
const {} = toRefs(data);
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<div class="tree" v-show="treeStateTime">
|
||
|
|
<div v-if="!treeState" class="box view1">
|
||
|
|
<view1Item v-for="item in view1List" :key="item.name" :item="item"></view1Item>
|
||
|
|
</div>
|
||
|
|
<div v-else class="box view2">
|
||
|
|
<view2 :list="view1List"></view2>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.tree{
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
position: relative;
|
||
|
|
.box{
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
box-sizing: border-box;
|
||
|
|
&.view1{
|
||
|
|
overflow-y: auto;
|
||
|
|
|
||
|
|
}
|
||
|
|
&.view2{
|
||
|
|
border: 1px solid #D9D9D9;
|
||
|
|
background-color: #f7f7f7;
|
||
|
|
border-radius: var(--border-radius, 1rem);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|