解决el-date-picker缩放弹出日期框屏幕适应问题

就躺了吧

已于 2024-02-17 16:58:14 修改

阅读量2.7k

点赞数 1

分类专栏： css 文章标签： javascript 前端 vue.js

于 2022-11-18 11:13:03 首次发布

本文链接：https://blog.csdn.net/weixin_44995829/article/details/127918191

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

因为el-data-picker日期下拉框的div与#app同级，查阅element-ui官网，设置append-to-body 将其插入body中（可能不用插入也可以），后设置popper-class="DataStyle"给日期下拉框设置类名，
通过@focus="beforeShow"当 input 获得焦点时触发方法，通过原生js方法给其设置缩放,因为日期下拉框的div与#app同级，所以在该组件的style下在写一个style不添加scoped,设置缩放中心

beforeShow(){
      this.$nextTick(()=>{
        $('.DataStyle')[0].style.transform = `scale(${this.zoomRatio})`;
      })
    },

在这里插入图片描述

(jQuery)
在这里插入图片描述
(原生)

document.getElementByClassName('DataStyle')[0].style.transform=`scale(${this.zoomRatio})`;

为什么通过原生js方法给其设置缩放

store.state.zoomRatio = baseHeight / MaxHeight
baseHeight = document.documentElement.clientHeight;
MaxHeight = 1080
zoomRatio是在style中获取不到，通过原生js设置