关于前端:怎么在Dom元素全屏的时候让Element的select组件正常显示

最近我的项目开发中，遇到一个奇怪的 bug：在应用 Element 的 select 组件时，当 Dom 元素全屏模式的时候，select 组件的下拉菜单不见了。

奇怪的是，查看控制台发现，select 组件的 Dom 节点实际上是存在的。

解决方案

Element 官网提供了解决方案，popper-append-to-body属性，是否将弹出框插入至 body 元素。当值为 false 的时候，这时即便 Dom 元素处于全屏模式，select 组件也失常显示。

<el-select
  v-model="value"
  placeholder="请抉择"
  :popper-append-to-body="false"
>
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value"
  >
  </el-option>
</el-select>

示例代码下载

能够复制以上代码运行查看应用成果，也能够到 GitHub: https://github.com/Jackyyans/code123 下载，更多示例将会继续更新，欢送关注。

作者：代码 123
原文链接：http://www.getcode123.com/how-to-show-select-component-fullscreen
版权申明：转载请附上原文链接