generate交互更新

src/component/HomePage/generalMenu.vue

@@ -0,0 +1,124 @@
+<template>
+	<div class="generalMenu_printModel">
+		<div @click.stop="openPrintModel" :class="driverClass.class1">{{ item.label }}</div>
+		<ul :class="driverClass.class2" v-show="openClick">
+			<li v-for="item,index in dataList" :class="{active:deleteItem == index}" class="printModel_item" @click="setprintModel(item,index)">{{ item.label }}</li>
+		</ul>
+	</div>
+ </template>
+ 
+ <script lang="ts">
+ import { defineComponent,ref ,nextTick} from "vue";  
+ import { Https } from "@/tool/https";
+ import { openGuide,driverObj__ } from "@/tool/guide";
+ export default defineComponent({
+	 name:'filterComponent',
+	 props:{
+		 item:{
+			 type:Object
+		 },
+		 dataList:{
+			 type:Array
+		 },
+		 driver__:{
+			 type:Boolean,
+			 default:false,
+		 },
+		 deleteItem:{
+			type:Number,
+			default:-1
+		 },
+		 driverClass:{
+			 type:Object,
+			 default:{class1:'',class2:'',classList:{item1:'',item2:'',item3:''}},
+		 }
+	 },
+	 emits:['setprintModel'],
+	 setup(props:any,{emit}){
+		let selectIndex = ref(0)
+		let openClick = ref(false)
+
+		let openPrintModel = ()=>{
+			document.addEventListener('click',removePrintModel)
+			openClick.value = true
+			nextTick().then(()=>{
+				if(props.driver__.driver){
+					driverObj__.moveNext()
+				}
+			})
+		}
+		let setprintModel = (item:any,index:any)=>{
+			if(props.deleteItem == index) return
+			openClick.value = false
+			selectIndex = index
+			nextTick().then(()=>{
+				if(props.driver__.driver){
+					driverObj__.moveNext()
+				}
+			})
+			emit('setprintModel',item)
+		}
+		let removePrintModel = ()=>{
+			openClick.value = false
+			document.removeEventListener('click',removePrintModel)
+		}
+		 return {
+			selectIndex,
+			openClick,
+			setprintModel,
+			openPrintModel,
+		 }
+		 
+	 },
+	
+ });
+ </script>
+ <style lang="less">
+ //衣服类型下拉菜单
+ .generalMenu_printModel{
+		margin-right: 2rem;
+		>div{
+			width: calc(13rem*1.2);
+			// display: flex;
+			display: block;
+			border-radius: calc(1rem*1.2);
+			margin: 0;
+			border: 2px solid;
+            cursor: pointer;
+			white-space: nowrap; 
+			overflow: hidden;
+			text-overflow: ellipsis;
+			padding: 0 calc(1rem*1.2);
+			text-align: center;
+		}
+		ul{
+			position: absolute;
+			width: calc(13rem*1.2);
+			text-align: center;
+			margin-top: calc(.3rem*1.2);
+			border-radius: calc(1rem*1.2);
+			overflow: hidden;
+			li{
+				// background: rgba(0,0,0,.2);
+				background: #cccccc;
+				line-height: 2;
+				cursor: pointer;
+				white-space: nowrap; 
+				overflow: hidden;
+				text-overflow: ellipsis;
+				padding: 0 calc(1rem*1.2);
+				&.active{
+					// opacity: .4;
+					color: #a4a4a4 !important;
+					background: #ebebeb !important;
+					cursor: not-allowed;
+				}
+			}
+			.printModel_item:hover{
+				// background: rgba(0,0,0,.4);
+				background: #999999;
+				color: #000;
+			}
+		}
+	}
+ </style>