封装设置衣服类型的下拉菜单

src/component/HomePage/sketchCategory.vue

@@ -0,0 +1,197 @@
+<template>
+   <div class="operate_file_block">
+		<div class="select_img_type">
+			<div
+				class="select_category"
+				@click.stop="showFileCategory(item)"
+			>
+				{{ item.categoryValue }}
+				<div
+					:class="[
+						'icon',
+						'iconfont',
+						'icon-xiala',
+						item.categoryShow
+							? 'icon_rotate'
+							: '',
+					]"
+				></div>
+			</div>
+			<div
+				class="category_list"
+				v-show="item.categoryShow"
+			>
+				<div
+					:class="[
+						'category_item',
+						item.category == cate.value
+							? 'select_category_item'
+							: '',
+					]"
+					v-for="(
+						cate, index
+					) in disignTypeList"
+					:key="index"
+					@click="
+						selectFileCategory(
+							item,
+							cate
+						)
+					"
+				>
+					{{ cate.name }}
+				</div>
+			</div>
+		</div>
+	</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:{
+        disignTypeList:{
+            type:Object
+        },
+        item:{
+            type:Object
+        },
+        generateList:{
+            type:Array
+        },
+		isSetSketchCategory:{
+			type:Boolean,
+			default:false,
+		},
+		driver__:{
+			type:Boolean,
+			default:false,
+		}
+    },
+    setup(props:any){
+		let showFileCategory = (file:any)=> {
+            file.categoryShow = true;
+			nextTick().then(()=>{
+				if(props.driver__.driver){
+					driverObj__.moveNext()
+				}
+			})
+            document.addEventListener("click", hiddenFileCategory);
+        }
+		let hiddenFileCategory = () => {
+			for (let item of props.generateList) {
+				item.categoryShow = false;
+			}
+            document.removeEventListener("click", hiddenFileCategory);
+        }
+		let selectFileCategory = (file: any, cate: any) => {
+			for (let item of props.generateList) {
+				item.categoryShow = false;
+			}
+			file.categoryValue = cate.name;
+			file.category = cate.value;
+			if(props.isSetSketchCategory){
+				setSketchLibrary(props.item)
+			}
+			if(props.driver__.driver){
+				driverObj__.moveNext()
+			}
+				// this.store.commit("sketchGenerateFiles", this.fileList);
+			
+        }
+		let setSketchLibrary = (item:any)=>{
+			let data = {
+				libraryId:[item.id],
+				level2Type:item.category,
+			}
+			Https.axiosPost(Https.httpUrls.setSketchLibrary,data).then(
+                (rv: any) => {
+                }
+            ).catch((res)=>{
+            });
+		}
+        return {
+            showFileCategory,
+			selectFileCategory,
+        }
+        
+    },
+   
+});
+</script>
+<style lang="less">
+//衣服类型下拉菜单
+.operate_file_block{
+	width: 100%;
+	height: 3rem;
+	font-size: 1.6rem;
+	color: #FFFFFF;
+	position: absolute;
+	left: 0;
+	bottom: 0;
+
+	.select_img_type{
+		height: 100%;
+		line-height: 3rem;
+		text-align: center;
+		background: rgba(0,0,0,0.6);
+		position: relative;
+		overflow: initial !important;
+		.select_category{
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			.icon-xiala{
+				margin-left: 0.8rem;
+			}
+		}
+
+		.icon_rotate{
+			-moz-transform:rotate(180deg);
+			-webkit-transform:rotate(180deg);
+			transform: rotate(180deg);
+			animation-direction: 0.5s;
+		}
+
+		.category_list{
+			position: absolute;
+			width: 100%;
+			cursor: pointer;
+			position: absolute;
+			// top: 3.1rem;
+			margin-top: .2rem;
+			left: 0;
+			// background: rgba(0,0,0,0.4);
+			background-color: rgb(177 177 177);
+			border: 1px solid #343579;
+			border-radius: 0.8rem;
+			// overflow: hidden;
+			z-index: 3;
+			height: 9rem;
+			overflow-x: hidden;
+			&.category_list::-webkit-scrollbar{display: none;}
+
+			.category_item{
+				text-align: left;
+				font-size: 1.4rem;
+				padding: 1rem 1.5rem;
+				line-height: 1.6rem;
+				font-weight: 600;
+				color: #595959;
+
+				&.select_category_item{
+					background: linear-gradient(-137deg, #eeefdb, #e7dbed);
+				}
+
+				&:hover{
+					background: linear-gradient(-137deg, #eeefdb, #e7dbed);
+				}
+			}
+		}
+	}
+}
+</style>