最近我的项目开发中,遇到一个奇怪的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
版权申明:转载请附上原文链接