网站维护中是不是关闭网站了,个人网站源代码下载,wordpress 摄影 模板,wordpress 建站 教程难点#xff1a; 普通方法会无法关闭#xff0c;虚拟触发会导致选一个关一个#xff0c;不用visible显示的方法太麻烦。 所以结合其他人的方法#xff0c;使用手动监听判断的方法#xff08;点击蓝色区域看参考#xff0c;这大佬vue2的#xff0c;我vue3#xff09; 注…难点 普通方法会无法关闭虚拟触发会导致选一个关一个不用visible显示的方法太麻烦。 所以结合其他人的方法使用手动监听判断的方法点击蓝色区域看参考这大佬vue2的我vue3 注意 在 Popover show 的时候监听 document 的 click 事件触发进入 hidePanel 方法判断当前点击的 el 是否在 Popover 内部如果不在则手动 hide Popover 并且移除监听事件 而且关键是el-form自己不能挂ref只能外层套一个div。第二个关键点是:teleportedfalse表单选项默认挂在body上你得取消挂本页面才能不选一下就关闭了 代码
el-form-itemel-popover:visiblevisiblePopover:width425placementbottom-starttriggerclickshowshowEventhidehideEventdiv refprojectButtonel-formclassformPopoverlabel-width64px:modelqueryParams:inlinetrueel-form-item propSex label性别el-selectv-modelqueryParams.Sexclearablefilterableplaceholder请选择性别:teleportedfalseel-optionv-foritem in SexList:keyitem.value:labelitem.label:valueitem.value//el-select/el-form-itemel-form-item propBuildingUp label圈舍el-selectv-modelqueryParams.BuildingUpclearablefilterableplaceholder请选择圈舍:teleportedfalseel-optionv-foritem in BuildingUpList:keyitem:labelitem:valueitem//el-select/el-form-itemel-form-item propGroupName label栏舍el-selectv-modelqueryParams.GroupNameclearablefilterableplaceholder请选择栏舍:teleportedfalseel-optionv-foritem in GroupNameList:keyitem.value:labelitem.value:valueitem.value//el-select/el-form-itemel-form-item propCowType label养殖类型el-selectv-modelqueryParams.CowTypeclearablefilterableplaceholder请选择养殖类型:teleportedfalseel-optionv-foritem in CowTypeList:keyitem.value:labelitem.label:valueitem.value//el-select/el-form-itemel-form-item propCategory label生长阶段el-selectv-modelqueryParams.Categoryclearablefilterableplaceholder请选择生长阶段:teleportedfalseel-optionv-foritem in CategoryList:keyitem.value:labelitem.value:valueitem.value//el-select/el-form-itemel-form-item propRepCode label繁殖状态el-selectv-modelqueryParams.RepCodeclearablefilterableplaceholder请选择繁殖状态:teleportedfalseel-optionv-foritem in RepCodeList:keyitem.value:labelitem.value:valueitem.value//el-select/el-form-itemel-form-item propGroCode label泌乳状态el-selectv-modelqueryParams.GroCodeclearablefilterableplaceholder请选择泌乳状态:teleportedfalseel-optionv-foritem in GroCodeList:keyitem.value:labelitem.value:valueitem.value//el-select/el-form-itemel-form-item propVariety label品种el-selectv-modelqueryParams.Varietyclearablefilterableplaceholder请选择品种:teleportedfalseel-optionv-foritem in VarietyList:keyitem.value:labelitem.value:valueitem.value//el-select/el-form-itemel-form-item propColor label花色el-selectv-modelqueryParams.Colorclearablefilterableplaceholder请选择花色:teleportedfalseel-optionv-foritem in ColorList:keyitem.value:labelitem.value:valueitem.value//el-select/el-form-itemel-form-item propLact label胎次el-selectv-modelqueryParams.Lactclearablefilterableplaceholder请选择胎次:teleportedfalseel-optionv-foritem in LactList:keyitem:labelitem:valueitem//el-select/el-form-itemel-form-item propFlag label在场状态el-selectv-modelqueryParams.Flagclearablefilterableplaceholder请选择在场状态:teleportedfalseel-optionv-foritem in FlagList:keyitem.value:labelitem.label:valueitem.value//el-select/el-form-itemel-form-item propStartTime label进场时间el-date-pickerv-modeldateList:clearabletruetypedaterangeunlink-panelsrange-separator~start-placeholder开始时间end-placeholder结束时间changedateChange:teleportedfalse//el-form-item/el-form/divtemplate #referenceel-button clickvisiblePopover !visiblePopover更多搜索/el-button/template/el-popover
/el-form-itemconst projectButton: Ref ref(null);
let visiblePopover ref(false);
const showEvent () {document.addEventListener(click, hidePanel, false);
};
const hideEvent () {document.removeEventListener(click, hidePanel, false);
};
const hidePanel (e: any) {if (!projectButton.value.contains(e.target)) {visiblePopover.value false;hideEvent();}
};
