部分页面样式调整

src/component/modules/selectMenu.vue

@@ -0,0 +1,172 @@
+
+
+<script lang="ts" setup>
+import { defineComponent,watch, h, defineProps ,toRefs,computed,reactive,triggerRef, nextTick} from "vue";
+import { message,Modal } from "ant-design-vue";
+import { LoadingOutlined ,ExclamationCircleOutlined} from "@ant-design/icons-vue";
+
+// import domTurnImg from '@/tool/domTurnImg'
+import { useI18n } from "vue-i18n";
+const props = defineProps({
+	selectList:{
+		type:Array,
+		default:()=>[]
+	},
+	isBtnOpen:{
+		type: Boolean,
+		default: false
+	},
+	select:{
+		type: [String,Boolean,Number,],
+		default: ''
+	},
+	style:{
+		type: Object,
+		default:()=>{}
+	}
+})
+const emit = defineEmits(['update:select','changeSelect','bentClick','change']);
+const selectMenu = reactive({
+  speedState: false
+})
+
+const openSpeed = (event?: MouseEvent) => {
+  	event?.stopPropagation()
+ 	selectMenu.speedState = !selectMenu.speedState
+  	if(selectMenu.speedState){
+		document.addEventListener('click',openSpeed)
+	}else{
+		document.removeEventListener('click',openSpeed)
+	}
+}
+const setSpeed = (item: any) => {
+  selectMenu.speedState = false
+  emit('update:select', item.value)
+  emit('change')
+  document.removeEventListener('click', openSpeed)
+}
+const openEditTools = ()=>{
+	emit('bentClick')
+}
+// 组件卸载时移除事件监听
+onBeforeUnmount(() => {
+	document.removeEventListener('click',openSpeed)
+})
+
+// 暴露给模板的响应式属性
+const { speedState } = toRefs(selectMenu)
+
+defineExpose({})
+</script>
+<template>
+	<div class="selectMenu white">
+		<div class="btnBox" :style="style">
+			<div class="" v-if="isBtnOpen" @click.stop="openSpeed" style="margin-left: 1rem;">
+				<slot name="btnText">
+				</slot>
+			</div>
+			<div class="" v-else @click.stop="openEditTools()" style="margin-left: 1rem;">
+				<slot name="btnText">
+				</slot>
+			</div>
+			<div class="icon iconfont icon-xiala" :class="{active:speedState}" @click.stop="openSpeed"></div>
+			<div class="content" :class="{active:isBtnOpen}" v-show="speedState">
+				<div v-for="item in selectList" :key="item.value" :class="{active:item.value == select}" @click.stop="setSpeed(item)" :title="item.title">{{ item.label }}</div>
+			</div>
+		</div>
+	</div>
+</template>
+<style lang="less" >
+.selectMenu{
+	position: relative;
+	display: flex;
+	align-items: center;
+	.btnBox{
+		color: #fff;
+		background-color: #000000;
+		cursor: pointer;
+		zoom: 1;
+		white-space: nowrap;
+		display: flex;
+		font-size: 1.6rem;
+		box-sizing: content-box;
+		justify-content: center;
+		padding: 0 2rem;
+		line-height: 5.4rem;
+		height: 5.4rem;
+		border-radius: 4rem;
+		border: 2px solid #000;
+	}
+	&.white{
+		.btnBox{
+			background-color: #fff;
+			color: #000;
+		}
+	}
+	.fi-bs-magic-wand{
+		margin-right:1rem;
+		display: flex;
+		cursor: pointer;
+		transition: all .3s;
+		position: relative;
+		z-index: 4;
+		width: 4rem;
+		align-items: center;
+		background-color: #fff;
+		justify-content: center;
+		&.fi-br-loading{
+			height: 100%;
+			background-color: rgba(0, 0, 0, 0);
+		}
+		&.active{
+			transform: rotate(180deg);
+		}
+		&.forbidden{
+			cursor: no-drop;
+		}
+	}
+	
+	
+	.icon-xiala{
+		margin-left: 1rem;
+		transition: all .3s;
+		cursor: pointer;
+		&.active{
+			transform: rotate(180deg);
+		}
+	}
+	.content{
+		position: absolute;
+		top: 100%;
+		// width: calc(100% - 2rem);
+		width: min-content;
+		min-width: 8rem;
+		text-align: center;
+		border-radius: calc(1rem* 1.2);
+		overflow: hidden;
+		z-index: 3;
+		margin-top: .2rem;
+		&.active{
+			right: 2rem;
+		}
+		left: auto;
+		>div{
+			background: #cccccc;
+			line-height: 2;
+			font-size: 1.4rem;
+			cursor: pointer;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			color: #fff;
+			padding: .4rem 1.2rem;
+			&.active{
+				background-color: #000;
+			}
+		}
+		>div:hover{
+			background: #000;
+		}
+	}
+}
+</style>