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