部分优化

src/component/HomePage/generalMenu.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="generalMenu_printModel">
+	<div class="generalMenu_printModel" ref="containerRef">
 		<div @click.stop="openPrintModel" :class="driverClass.class1" :style="{...$props.style_,'width':selectWidth}">
 			<a-popover v-if="isCanvas">
 				<template #content>
@@ -10,46 +10,34 @@
 				<span v-else>{{ item?.name }}</span>
 			</a-popover>
 			<div v-else>
-				<span v-if="item?.label">{{ item?.label }}</span>
-				<span v-else>{{ item?.name }}</span>
+				<span v-if="item?.label" :style="{'font-family': isFontType?item?.value:'',fontSize:selectSize}">{{ item?.label }}</span>
+				<span v-else :style="{'font-family': isFontType?item?.value:'',fontSize:selectSize}">{{ item?.name }}</span>
 			</div>
 			<div class="icon iconfont icon-xiala" :class="{active:openClick}"></div>
 		</div>
-		<ul :class="driverClass.class2" v-show="openClick" :style="{'width':selectWidth,...ulStyle}">
+		<ul 
+			:class="driverClass.class2" 
+			v-show="openClick" 
+			:style="{
+				'width': selectWidth,
+				...ulStyle,
+				...dropdownPositionStyle
+			}"
+			ref="dropdownRef"
+		>
 			<div>
 				<li v-for="listItem,index in dataList" :class="{active:deleteItem == index,hover:((item?.label && item?.label == listItem?.label) || (item?.name && item?.name == listItem?.name))}" class="printModel_item" @click="setprintModel(listItem,index)">
 					<a-popover placement="right" v-if="isCanvas">
 						<template #content>
-							<!-- <span v-if="item.img != -1 && index == dataList?.length -1 " class="icon iconfont icon-shanchu" style="cursor: pointer; position: absolute; right: 10px; top: 10px;" @click.stop="deleteFile(item)"></span> -->
 							<img v-if="listItem.img != -1" style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt="">
-							<!-- <div v-else-if="item.img == -1" class="generalMenu_printModel_upload ">
-								<i class="fi fi-br-upload input_border" style="width: 8rem; height: 8rem;padding: 0;" :title="$t('Generate.uploadTitle')">
-									<a-upload
-										style="height: 100%;"
-										class="search_upImg"
-										:capture="null"
-										:action="uploadUrl + '/api/element/upload'"
-										list-type="picture-card"
-										:data="{
-											...upload,
-										}"
-										:maxCount='1'
-										:headers="{ Authorization: token }"
-										accept=".jpg,.png,.jpeg,.bmp"
-										@change="(file) => fileUploadChange(file)"
-									>
-									</a-upload>
-								</i>
-							</div> -->
 							<span style="text-align: center;">{{ $t('Generate.referenceImage') }}</span>
-
 						</template>
 						<span v-if="listItem?.label">{{ listItem?.label }}</span>
 						<span v-else>{{ listItem?.name }}</span>
 					</a-popover>
 					<div v-else>
-						<span v-if="listItem?.label">{{ listItem?.label }}</span>
-						<span v-else>{{ listItem?.name }}</span>
+						<span v-if="listItem?.label" :style="{'font-family': isFontType?listItem?.value:''}">{{ listItem?.label }}</span>
+						<span v-else :style="{'font-family': isFontType?listItem?.value:''}">{{ listItem?.name }}</span>
 					</div>
 				</li>
 			</div>
@@ -58,7 +46,7 @@
  </template>
  
  <script lang="ts">
- import { defineComponent,ref ,nextTick} from "vue";  
+ import { defineComponent, ref, nextTick, onMounted, onUnmounted, computed } from "vue";  
 import { useStore } from "vuex";
 import { Https } from "@/tool/https";
  import { openGuide,driverObj__ } from "@/tool/guide";
@@ -81,6 +69,14 @@ import { message, Upload, Modal } from "ant-design-vue";
 			 type:Boolean,
 			 default:false,
 		 },
+		 isFontType:{
+			 type:Boolean,
+			 default:true,
+		 },
+		 selectSize:{
+			 type:String,
+			 default:'1.8rem'
+		 },
 		 deleteItem:{
 			type:Number,
 			default:-1
@@ -106,16 +102,81 @@ import { message, Upload, Modal } from "ant-design-vue";
 	 setup(props:any,{emit}){
 		let selectIndex = ref(0)
 		let openClick = ref(false)
+		let containerRef = ref<HTMLElement | null>(null)
+		let dropdownRef = ref<HTMLElement | null>(null)
+		let dropdownPositionStyle = ref({})
         let store = useStore();
+
+		// 计算元素到屏幕底部的距离
+		const getDistanceToBottom = (element: HTMLElement) => {
+			const rect = element.getBoundingClientRect()
+			return window.innerHeight - rect.bottom
+		}
+
+		// 计算元素到屏幕顶部的距离
+		const getDistanceToTop = (element: HTMLElement) => {
+			const rect = element.getBoundingClientRect()
+			return rect.top
+		}
+
+		// 智能计算下拉菜单位置
+		const calculateDropdownPosition = () => {
+			if (!containerRef.value || !dropdownRef.value) return {}
+			
+			const trigger = containerRef.value
+			const dropdown = dropdownRef.value
+			
+			const distanceToBottom = getDistanceToBottom(trigger)
+			const distanceToTop = getDistanceToTop(trigger)
+			const dropdownHeight = dropdown.offsetHeight || 200 // 默认高度
+			
+			// 如果下方空间足够，正常向下展开
+			if (distanceToBottom >= dropdownHeight) {
+				return {
+					top: '100%',
+					bottom: 'auto',
+					maxHeight: 'none',
+					transformOrigin: 'top center'
+				}
+			} 
+			// 如果下方空间不足但上方空间足够，向上展开
+			else if (distanceToTop >= dropdownHeight) {
+				return {
+					top: 'auto',
+					bottom: '100%',
+					maxHeight: 'none',
+					transformOrigin: 'bottom center'
+				}
+			} 
+			// 如果上下空间都不足，向上展开并限制高度
+			else {
+				return {
+					top: 'auto',
+					bottom: '100%',
+					maxHeight: `${distanceToTop - 20}px`, // 留出一些边距
+					overflowY: 'auto',
+					transformOrigin: 'bottom center'
+				}
+			}
+		}
+
+		// 调整下拉菜单位置
+		const adjustDropdownPosition = () => {
+			dropdownPositionStyle.value = calculateDropdownPosition()
+		}
+
 		let openPrintModel = ()=>{
-			document.addEventListener('click',removePrintModel)
+			document.addEventListener('click', removePrintModel)
+			window.addEventListener('resize', handleResize)
 			openClick.value = true
 			nextTick().then(()=>{
+				adjustDropdownPosition() // 打开时计算位置
 				if(props.driver__.driver){
 					driverObj__.moveNext()
 				}
 			})
 		}
+
 		let setprintModel = (item:any,index:any)=>{
 			if(props.deleteItem == index) return
 			if(item.img == -1) return
@@ -128,10 +189,37 @@ import { message, Upload, Modal } from "ant-design-vue";
 			})
 			emit('setprintModel',item)
 		}
+
 		let removePrintModel = ()=>{
 			openClick.value = false
-			document.removeEventListener('click',removePrintModel)
+			document.removeEventListener('click', removePrintModel)
+			window.removeEventListener('resize', handleResize)
 		}
+
+		// 窗口 resize 处理
+		const handleResize = () => {
+			if (openClick.value) {
+				adjustDropdownPosition()
+			}
+		}
+
+		// 滚动处理
+		const handleScroll = () => {
+			if (openClick.value) {
+				adjustDropdownPosition()
+			}
+		}
+
+		onMounted(() => {
+			window.addEventListener('scroll', handleScroll, true)
+		})
+
+		onUnmounted(() => {
+			window.removeEventListener('scroll', handleScroll, true)
+			document.removeEventListener('click', removePrintModel)
+			window.removeEventListener('resize', handleResize)
+		})
+
 		let fileUploadChange = (data: any)=>{
             let file = data.file;
 			let bor = true
@@ -148,23 +236,19 @@ import { message, Upload, Modal } from "ant-design-vue";
 				}else{
 					bor = false
 				}
-                
             } else if (file.status === "error") {
 					bor = false
             }
 			if(!bor){
-                // let res:any = JSON.parse(file.xhr.response);
-					// props.dataList.forEach((item:any)=>{
-					// 	if(item.img == -1){
-					// 	}
-					// })
-                // message.warning(res.errMsg);
+                // 错误处理
 			}
         }
+
 		let deleteFile = (item:any)=>{
 			item.img = -1
 			emit('setprintModel',props.dataList[0])
 		}
+
 		 return {
 			selectIndex,
 			openClick,
@@ -173,8 +257,10 @@ import { message, Upload, Modal } from "ant-design-vue";
 			openPrintModel,
 			fileUploadChange,
 			deleteFile,
+			containerRef,
+			dropdownRef,
+			dropdownPositionStyle
 		 }
-		 
 	 },
 	 data(prop) {
         return {
@@ -199,6 +285,7 @@ import { message, Upload, Modal } from "ant-design-vue";
 	}
  });
  </script>
+
  <style lang="less">
  .ant-popover-inner-content{
 		display: flex;
@@ -206,11 +293,14 @@ import { message, Upload, Modal } from "ant-design-vue";
 		align-items: center;
 	}
 </style>
+
  <style lang="less">
  //衣服类型下拉菜单
  .generalMenu_printModel{
+		position: relative;
 		margin-right: 2rem;
 		height: 5rem;
+		
 		.icon-xiala{
 			margin-left: auto;
 			transition: all .3s;
@@ -218,8 +308,8 @@ import { message, Upload, Modal } from "ant-design-vue";
 				transform: rotate(180deg);
 			}
 		}
+		
 		>div{
-			// display: flex;
 			display: block;
 			width: 20rem;
 			border-radius: 1rem;
@@ -235,49 +325,62 @@ import { message, Upload, Modal } from "ant-design-vue";
 			box-sizing: border-box;
 			align-items: center;
 			background: #fff;
+			> div{
+				display: flex;
+				align-items: center;
+			}
 			> span{
 				white-space: nowrap; 
 				overflow: hidden;
 				text-overflow: ellipsis;
 			}
+			
 			>i{
 				justify-content: center;
 				position: relative;
 			}
 		}
+		
 		ul{
 			position: absolute;
+			left: 0;
 			width: 20rem;
-			margin-top: calc(.3rem*1.2);
-			z-index: 10;
+			margin-top: 0.36rem;
+			z-index: 1000;
 			overflow: hidden;
-			border-radius: calc(1rem*1.2);
+			border-radius: 1.2rem;
+			background: #fff;
+			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+			transition: all 0.3s ease;
+			
 			> div{
 				overflow-y: auto;
-				
-				height: 100%;
+				max-height: 300px;
 			}
+			
 			li{
-				// background: rgba(0,0,0,.2);
 				background: #fff;
 				line-height: 2;
 				cursor: pointer;
 				white-space: nowrap; 
 				overflow: hidden;
 				text-overflow: ellipsis;
-				padding: 0 calc(1rem*1.2);
+				padding: 0 1.2rem;
+				transition: all 0.2s ease;
+				position: relative;
+				
 				span{
 					display: block;
 					width: 100%;
 				}
+				
 				&.active{
-					// opacity: .4;
 					pointer-events: none;
 					color: #a4a4a4 !important;
 					background: #ebebeb !important;
 					cursor: not-allowed;
-
 				}
+				
 				&.hover{
 					background: #f3f3f6;
 					color: #000;
@@ -287,14 +390,13 @@ import { message, Upload, Modal } from "ant-design-vue";
 					position: absolute;
 					right: 10px;
 					top: 10px;
+					z-index: 2;
 				}
 			}
 			.printModel_item:hover{
-				// background: rgba(0,0,0,.4);
 				background: #f3f3f6;
 				color: #000;
 			}
 		}
 	}
-	
  </style>