sketch生成基础结构

src/views/home/versionTree/tree/index.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, reactive, toRefs, watch } from "vue";
+import { ref, onMounted, onUnmounted, reactive, toRefs, watch, nextTick } from "vue";
 import view1Item from './view1Item.vue'
 import view2 from './view2/index.vue'
-import { versionsList } from './view2/tools/versionsData'
 
 const props = defineProps({
+	versionsList: {
+		type: Array,
+		default: () => []
+	},
 	treeState:{
 		default:false,
 	},
@@ -19,6 +22,8 @@ const emit = defineEmits([
 let data = reactive({
 })
 
+const view1Ref = ref(null)
+
 const isLoad = ref(false)
 const treeStateTime = ref(true)
 
@@ -35,13 +40,7 @@ const pushView2Item = (item)=>{
 }
 
 const treeList = ref([
-	{
-		name:'P1',
-	},{
-		name:'V1',
-	},{
-		name:'V1-1',
-	}
+	
 ])
 
 function traverseArray(items, callback) {
@@ -53,22 +52,44 @@ function traverseArray(items, callback) {
 		}
 	}
 }
-
 const initialize = ()=>{
 	isLoad.value = false
-	setSelectItem(versionsList[0])
 	treeList.value = []
-	traverseArray(versionsList, (item, index) => {
+	treeList.value.push({id: null,name:'index',})
+	traverseArray(props.versionsList, (item, index) => {
 		treeList.value.push(item)
 	})
 	isLoad.value = true
+	if(!props.selectItem?.id)setSelectItem(treeList.value[treeList.value.length - 1])
 } 
 
 const setSelectItem = (item)=>{
-	console.log(item[0])
+	if(!item.id)return
 	emit('update:selectItem', {...item})
 }
 
+// 滚动到选中项
+const scrollToActive = ()=>{
+	nextTick(() => {
+		const activeEl = view1Ref.value?.querySelector('.active')
+		console.log(activeEl)
+		activeEl.scrollIntoView({ 
+			behavior: 'smooth', 
+			block: 'nearest' 
+		})
+	})
+}
+
+watch(()=>treeStateTime.value,(newVal,oldVal)=>{
+	if((props.treeState + '') == 'false'){
+		scrollToActive()
+	}
+})
+
+watch(()=>props.selectItem,(newVal,oldVal)=>{
+	scrollToActive()
+},{immediate: true})
+
 onMounted(()=>{
 	initialize()
 })
@@ -79,8 +100,8 @@ const {} = toRefs(data);
 </script>
 <template>
 	<div class="tree" v-show="treeStateTime" v-if="isLoad">
-		<div v-show="!treeState" class="box view1">
-			<view1Item v-for="item in treeList" :key="item.name" :item="item" @click="emit('selectItem', item)"></view1Item>
+		<div v-show="!treeState" class="box view1" ref="view1Ref">
+			<view1Item v-for="item in treeList" :key="item.name" :selectItem="props.selectItem" :item="item" @click="setSelectItem(item)"></view1Item>
 		</div>
 		<div v-show="treeState" class="box view2">
 			<view2