关于前端:element中popover弹框中有选择器点击后popover消失的解决办法

element中popover弹框中有选择器，点击后popover隐没的解决办法

element中有很多组件，常常用到的一个popover组件，很多时候大家都是应用它展现一些页面放不下或者不好搁置的内容，很少在外面应用一些选择器，输入框等组件。

默认配置中，在应用到选择器组件时，一旦点击下拉选项，popover就会隐没，这很显著不是咱们想要的实现成果。

在hover=“click”的popover中，组件的显示与否，次要看鼠标click点击时的标签是否对应的弹出框中。如果不是的话就会暗藏，如果是的话，就不会暗藏，懂了这个逻辑，咱们就应该去看一下官网是不是有对应的属性提供给咱们。

能够看到，组建中的popperAppendToBody属性决定了对应的弹框append到哪个父节点上。

默认的话是body，如果这个属性改成false就变成了append到对应的select标签上面。

这个时候点击下拉选项中的内容，也相当于是在对应的父弹框中点击，而不是append到body中的标签，天然刚刚关上的popover也就不会隐没了。

可能形容的不够具体，代码配置其实也就一行。

:popperAppendToBody="false"

上面给出一个应用的例子

 <el-popover placement="right" width="400" trigger="click">      <div>        <el-select          :popperAppendToBody="false"          v-model="value"          placeholder="请抉择"        >          <el-option            v-for="item in options"            :key="item.value"            :label="item.label"            :value="item.value"          >          </el-option>        </el-select>      </div>      <template #reference>        <el-button>click 激活</el-button>      </template>    </el-popover>

有趣味的同学能够比照下增加跟不增加这个属性时对应的DOM构造。