vue-fullscreen全屏下elementui 日期下拉框 不出来，非全屏，下拉框可以出来，全屏下拉框不出来（发版）

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

问题：非全屏，下拉框可以出来，全屏下拉框不出来

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

https://blog.csdn.net/qq_42907330/article/details/109290894?utm_medium=distribute.pc_relevant.none-task-blog-2_defaultbaidujs_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++
		}
	},