问题描述
我希望在使用element-plus的el-popover组件中放一个input框做搜索功能
这个组件在trigger:"click"
的情况下没有问题,但是当,trigger:“hover” 时只要一输入中文就会导致组件隐藏,在github上找到该问题以及解决方案github连接
由于该问题仅在hover时触发,所以通过切换trigger的类型解决该问题
<el-popover v-model:visible="popVisible" placement="bottom-end" :width="300" :trigger="popTrigger">
<div class="pro-search">
<el-input
v-model="iptValue"
style="width: 100%"
placeholder="搜索"
prefix-icon="Search"
@compositionstart="popTrigger = 'click'"
@compositionend="popTrigger = 'hover'"
clearable
/>
</div>
<div class="pro-list">
<div class="pro-item">选项一</div>
<div class="pro-item">选项二</div>
<div class="pro-item">选项三</div>
<div class="pro-item">选项四</div>
</div>
<template #reference>
<span class="pro-name">
选项一
</span>
</template>
</el-popover>