vue-fullscreen全屏下elementui 日期下拉框 不出来,非全屏,下拉框可以出来,全屏下拉框不出来(发版)
vue-fullscreen全屏下elementui 日期下拉框 不出来问题:非全屏,下拉框可以出来,全屏下拉框不出来1.解决思路:上网查后,下拉框不要放入body中可以解决,搜一个属性,让下拉框不放入bodyhttps://blog.csdn.net/qq_42907330/article/details/109290894?utm_medium=distribute.pc_relevant.n
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++
}
},
更多推荐
所有评论(0)