el-select嵌套el-select或者嵌套el-time-picker点击选择内层的日期时间导致外侧的el-option收回问题的解决办法

由于业务需求页面中用到了如下代码

<el-select v-model="domains" placeholder="选择生效时间" @visible-change="visChange" v-click-outside="closeBox" ref="timeRef" >
			<el-option  label="选项" value="1" v-show="false" />
				<template>
					<el-col>
						<el-time-picker
							@visible-change="visTimeChange"
							v-model="activityTime"
							is-range
							range-separator="到"
							value-format="HH:mm:ss"
							:picker-options="pickerOptions1"
							start-placeholder="开始时间"
							end-placeholder="结束时间"
						/>
						</el-icon>
					</el-col>
				</template>
			</div>
			<el-option label="暂无数据" value="0"/>
		</el-select>

其中就是el-select嵌套el-time-picker时间选择 当选择时间时el-select的下拉框自动收回了的问题
解决办法如下：
1：引入elementui的扩展自定义指令 clickOutside
import { ClickOutside as vClickOutside } from ‘element-plus’
2：el-select 标签中添加绑定方法 v-click-outside=“closeBox”
备注：这个指令用来控制点击el-select标签之外其他空白区域触发的方法
3：页面中定义对应的方法
function closeBox(){
console.log(‘我点击了空白区域’)
}
下一步：获取el-select 的当前状态是否展开或折叠 标签添加 ref=“timeRef”
const timeRef = ref();
timeRef.value.visible == true 为true 展开 false 折叠
下一步：判断el-select 标签下拉框是否出现或隐藏 visible-change 下拉框出现/隐藏时触发
el-select 添加 @visible-change=“visChange” 对应方法如下
定义变量获取状态
let visChangeFlage = ref(null)
function visChange(val:any){
visChangeFlage.value = val
}
下一步：判断el-time-picker 标签下拉框是否出现或隐藏 同样获取状态
el-time-picker 添加 @visible-change=“visTimeChange” 对应方法如下
定义变量获取状态
let visTimeChangeFlage = ref(null)
function visTimeChange(val:any){
visTimeChangeFlage.value = val
}

最后在closeBox() {} 中根据获取的三个状态值进行判断 el-select 下拉框是否显示
当前有三个状态值 分别为：
el-select 的状态timeRef.value.visible
el-select是否展开visChangeFlage.value
el-time-picker是否展开visTimeChangeFlage.value

console.log(timeRef.value.visible,visChangeFlage.value,visTimeChangeFlage.value);

根据三个数据的状态判断显示与否
完整代码如下：

import { ClickOutside as vClickOutside } from 'element-plus'

<el-select  v-model="domains" 
			placeholder="选择生效时间" 
			@visible-change="visChange" 
			v-click-outside="closeBox" 
			ref="timeRef" >
			<el-option  label="111" value="1" v-show="false" />
				<template>
					<el-col class="flex mb-10px ml-20px" :span="20">
						<el-time-picker
							@visible-change="visTimeChange"
							v-model="activityTime"
							is-range
							range-separator="到"
							value-format="HH:mm:ss"
							:picker-options="pickerOptions1"
							start-placeholder="开始时间"
							end-placeholder="结束时间"
						/>
						</el-icon>
					</el-col>
				</template>
			</div>
			<el-option label="暂无数据" value="0"/>
		</el-select>

const timeRef = ref();
//el-select 的方法
let visChangeFlage = ref(null)
function visChange(val:any){
	visChangeFlage.value =  val
}
//el-time-picker 的方法
let visTimeChangeFlage = ref(null)
function visTimeChange(val:any){
	visTimeChangeFlage.value =  val
}
//自定义指令的方法 （点击空白触发的方法）
function closeBox(){
	console.log(timeRef.value.visible,visChangeFlage.value,visTimeChangeFlage.value);
	if(timeRef.value.visible == false && visChangeFlage.value == null&& visTimeChangeFlage.value == null){
		timeRef.value.visible = false
	}
	if(timeRef.value.visible == false && visChangeFlage.value == true&& visTimeChangeFlage.value == null){
		timeRef.value.visible = false
	}
	if(timeRef.value.visible == true && visChangeFlage.value == true&& visTimeChangeFlage.value == null){
		timeRef.value.visible = true
	}
	// if(timeRef.value.visible == true && visChangeFlage.value == true&& visTimeChangeFlage.value == false){
	// 	timeRef.value.visible = true
	// }
	if(timeRef.value.visible == false && visChangeFlage.value == true&& visTimeChangeFlage.value == true){
		timeRef.value.visible = true
	}
}