110 lines
2.2 KiB
Vue
110 lines
2.2 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||
|
|
import Tree from './tree/index.vue'
|
||
|
|
const props = defineProps({
|
||
|
|
versionTreeData:{
|
||
|
|
type:Object,
|
||
|
|
default:()=>{
|
||
|
|
return {
|
||
|
|
drawer:false,
|
||
|
|
list:[],
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
})
|
||
|
|
//const emit = defineEmits([
|
||
|
|
//])
|
||
|
|
const treeState = ref(false)//
|
||
|
|
|
||
|
|
const openTree = ()=>{
|
||
|
|
treeState.value = !treeState.value
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
let data = reactive({
|
||
|
|
})
|
||
|
|
onMounted(()=>{
|
||
|
|
})
|
||
|
|
onUnmounted(()=>{
|
||
|
|
})
|
||
|
|
defineExpose({})
|
||
|
|
const {} = toRefs(data);
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<div class="versionTree">
|
||
|
|
<el-drawer
|
||
|
|
v-model="versionTreeData.drawer"
|
||
|
|
:close-on-press-escape="false"
|
||
|
|
:close-on-click-modal="false"
|
||
|
|
:size="treeState?'109rem':'49rem'"
|
||
|
|
body-class="versionTreeBody"
|
||
|
|
:with-header="false">
|
||
|
|
<div class="versionTreeTitle">
|
||
|
|
<span>Version Tree: Retro Sofa Sketch</span>
|
||
|
|
<div class="closeBtn" @click="versionTreeData.drawer = false">
|
||
|
|
<div class="closeIcon">
|
||
|
|
<SvgIcon name="close" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style="display: flex;">
|
||
|
|
<el-button class="expandBtn" @click="openTree" style="width: 5rem;">+</el-button>
|
||
|
|
<el-button class="expandBtn" @click="openTree" style="width: 5rem;">-</el-button>
|
||
|
|
</div>
|
||
|
|
<div class="versionTreeBox">
|
||
|
|
<div class="tree">
|
||
|
|
<Tree :treeState="treeState"></Tree>
|
||
|
|
</div>
|
||
|
|
<div class="detail">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-drawer>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.versionTree{
|
||
|
|
--border-radius: 1rem;
|
||
|
|
:deep(.versionTreeBody){
|
||
|
|
--el-drawer-padding-primary: 0rem;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
.versionTreeTitle{
|
||
|
|
width: 100%;
|
||
|
|
height: 8rem;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 0 .8rem 0 1.2rem;
|
||
|
|
border-bottom: 1px solid #C9C9C9;
|
||
|
|
> span{
|
||
|
|
font-size: 2rem;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
> .closeBtn{
|
||
|
|
width: 2.4rem;
|
||
|
|
height: 2.4rem;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.versionTreeBox{
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
overflow: hidden;
|
||
|
|
> .tree{
|
||
|
|
flex: 1;
|
||
|
|
height: 100%;
|
||
|
|
overflow: hidden;
|
||
|
|
padding: 1.8rem 0 1.8rem 2.1rem;
|
||
|
|
}
|
||
|
|
> .detail{
|
||
|
|
width: 35rem;
|
||
|
|
margin: 1.4rem 3rem 0 3.4rem;
|
||
|
|
height: 100%;
|
||
|
|
overflow: auto;
|
||
|
|
background-color: #F5F5F5;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|