aida_front/src/component/modules/selectMenu.vue

<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 1rem;
		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>