vue-fullscreen全屏下elementui 日期下拉框 不出来

问题:非全屏,下拉框可以出来,全屏下拉框不出来

1.解决思路:上网查后,下拉框不要放入body中可以解决,搜一个属性,让下拉框不放入body

https://blog.csdn.net/qq_42907330/article/details/109290894?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_title~default-0.essearch_pc_relevant&spm=1001.2101.3001.4242.1

根据上面的链接,可以使用 :append-to-body=‘false’

但是,加上 :append-to-body=‘false’ 后,全屏下下拉框可以出来了,不全屏的时候又不出来了

2.于是决定根据是否全屏判断,来决定是否放入body中,所以改为 :append-to-body=’!fullscreenFlag’,
结果: 非全屏下,点击日期,出来下拉框,点击全屏,再点击日期,下拉框不出来;重新刷新页面,先全屏,点击日期,下拉框出现,退出全屏点日期,下拉框出现。

3.检查一下元素,发现除了第一次是添加元素后,其他时候是控制display来控制元素的显示和隐藏,全屏下,元素的display:none已经去掉了,但是元素仍然不显示,猜测是层级不够,调整z-index后,也不能展示,只能重新找方向。
在这里插入图片描述

4.猜测可能是首次渲染的问题,于是在日期组件上绑定了key值,监听是否全屏,更新key,让组件重新渲染,试了后,已经解决。

<div class="time_picker">
	<!-- 非全屏下,下拉框插入body;全屏下,下拉框放入局部 -->
	<el-date-picker
		:key="num"
		:append-to-body='!fullscreenFlag'
		v-model="selectDate"
		type="date"
		value-format="yyyy-MM-dd"
		placeholder="选择日期" >
	</el-date-picker>
</div>

5.后来发现time_picker加了overflow:hidden,去掉后,局部也可以出现

```javascript
<div class="time_picker">
	<!-- 非全屏下,下拉框插入body;全屏下,下拉框放入局部 -->
	<el-date-picker
		:append-to-body='false'
		v-model="selectDate"
		type="date"
		value-format="yyyy-MM-dd"
		placeholder="选择日期" >
	</el-date-picker>
</div>
```javascript
watch: {
		fullscreenFlag(val){
          this.num++
		}
	},
Logo

前往低代码交流专区

更多推荐