|
|
@ -1,5 +1,6 @@ |
|
|
|
<template> |
|
|
|
<div class="from-content" style="width: 100%"> |
|
|
|
<!-- <div ref="mask" style="position: fixed; z-index: 9999999; left: 0; top:0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.5);" @click.prevent="onClickMask" v-if="visible"></div> --> |
|
|
|
<ElPopover |
|
|
|
ref="PopoverRef" |
|
|
|
placement="bottom" |
|
|
@ -10,7 +11,6 @@ |
|
|
|
v-model="visible" |
|
|
|
@show="handleShow" |
|
|
|
style="width: 100%" |
|
|
|
v-clickoutside="handlerClose" |
|
|
|
> |
|
|
|
<div |
|
|
|
class="InputSearch input" |
|
|
@ -22,19 +22,20 @@ |
|
|
|
style="width: 100%" |
|
|
|
v-model="value" |
|
|
|
:placeholder="placeholder" |
|
|
|
clearable |
|
|
|
@change="handleSearch" |
|
|
|
></ElInput> |
|
|
|
<img src="./search.svg" v-show="!disable" @click="visible = !visible" /> |
|
|
|
></ElInput> |
|
|
|
<img src="./search.svg" v-show="!disable" @click="onOpenPop" /> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
class="InputSearch" |
|
|
|
v-else |
|
|
|
slot="reference" |
|
|
|
ref="ReferenceInputRef" |
|
|
|
@click="visible = !visible" |
|
|
|
@click="onOpenPop" |
|
|
|
> |
|
|
|
<span>{{ placeholder }}</span> |
|
|
|
<img src="./search.svg" /> |
|
|
|
<img src="./search.svg"/> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div style="width: 100%; max-height: 360px" v-show="visible"> |
|
|
@ -105,6 +106,7 @@ export default { |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
isClickedBtn: false, |
|
|
|
visible: false, |
|
|
|
types: this.type, |
|
|
|
value: "", |
|
|
@ -126,18 +128,36 @@ export default { |
|
|
|
}; |
|
|
|
}, |
|
|
|
}, |
|
|
|
mounted(){ |
|
|
|
// document.getElementById("app") |
|
|
|
document.addEventListener("click" , ()=>{ |
|
|
|
if(!this.isClickedBtn){ |
|
|
|
setTimeout(() => { |
|
|
|
this.visible = false; |
|
|
|
}, 100) |
|
|
|
} |
|
|
|
this.isClickedBtn = false; |
|
|
|
} , false) |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
onOpenPop(){ |
|
|
|
this.isClickedBtn = true; |
|
|
|
this.visible = !this.visible; |
|
|
|
}, |
|
|
|
onClickMask(){ |
|
|
|
this.visible = false; |
|
|
|
}, |
|
|
|
handleShow() { |
|
|
|
if (this.width) return; |
|
|
|
|
|
|
|
this.width = this.$refs.ReferenceInputRef.getBoundingClientRect().width; |
|
|
|
}, |
|
|
|
handleResetForm() { |
|
|
|
this.visible = true; |
|
|
|
// this.visible = true; |
|
|
|
this.$refs.FormConfigRef?.reset(); |
|
|
|
this.$refs.FormConfigRef.$refs.ElFormRef.resetFields(); |
|
|
|
this.$refs.PopoverRef.doClose(); |
|
|
|
// this.$refs.PopoverRef.doClose(); |
|
|
|
|
|
|
|
this.$emit( |
|
|
|
"handleSearch", |
|
|
@ -173,10 +193,7 @@ export default { |
|
|
|
console.log("catch"); |
|
|
|
}); |
|
|
|
} |
|
|
|
}, |
|
|
|
handlerClose() { |
|
|
|
this.visible = false; |
|
|
|
}, |
|
|
|
} |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|